JavaScriptのinnerWidth・innerHeight・outerWidth・outerHeightとは？ウィンドウサイズの取得・設定方法を解説
innerWidth・innerHeight・outerWidth・outerHeight は、
ブラウザウィンドウのサイズを参照・設定するためのプロパティです。
表示領域のサイズやウィンドウ全体のサイズを取得したいときに利用します。
4つのプロパティの違い
ウィンドウサイズには「内側（表示領域）」と「外側（ウィンドウ全体）」の2種類があります。
- innerWidth：ウィンドウ内側（表示領域）の幅
- innerHeight：ウィンドウ内側（表示領域）の高さ
- outerWidth：ウィンドウ外側（枠やバーを含む全体）の幅
- outerHeight：ウィンドウ外側（枠やバーを含む全体）の高さ
値はすべてピクセル単位で扱います。
※ Internet Explorer では正しく動作しないため、サイズ変更には resizeTo() や resizeBy() の使用が推奨されます。
使用例：内側のサイズを取得する
let iw = innerWidth;
let ih = innerHeight;
let ih = innerHeight;
→ 現在のウィンドウの表示領域の幅と高さが変数に代入されます。
使用例：外側のサイズを取得する
document.write(“<em>ウィンドウの外側の幅：” + outerWidth + “</em>”);
→ ウィンドウ全体の幅を画面に表示します。
使用例：外側のサイズを設定する
outerHeight = 480;
→ ウィンドウ全体の高さを 480px に変更します。
inner / outer の違いを図解イメージで理解
- inner：実際にページが表示される領域（コンテンツ部分）
- outer：タイトルバー・ツールバー・枠などを含むウィンドウ全体
ブラウザによって枠の大きさが異なるため、
inner と outer の差は環境によって変わります。
まとめ
innerWidth / innerHeight：表示領域のサイズouterWidth / outerHeight：ウィンドウ全体のサイズ- 値はピクセル単位で扱う
- IEでは非対応のため、サイズ変更は
resizeTo()/resizeBy()が安全
