window.innerWidthとwindow.outerWidthの違い
ウィンドウのinner/outer寸法の違い、ブラウザクロームに含まれる要素、各測定値が重要な実用的シナリオを解説します。
Viewport & Screen
詳細な説明
Inner vs Outerウィンドウサイズ
windowオブジェクトはブラウザウィンドウの異なる部分を測定する2組のサイズプロパティを公開しています。
innerWidth / innerHeight
ブラウザウィンドウのコンテンツエリアを測定します。スクロールバーが表示されている場合はそれを含みます。
outerWidth / outerHeight
フレーム、ツールバー、アドレスバー、タブバー、ウィンドウボーダーを含むブラウザウィンドウ全体を測定します。
差分
outerとinnerの差がブラウザ自身のUIが占めるスペースを示します：
const chromeHeight = window.outerHeight - window.innerHeight;
console.log('ブラウザクロームの高さ:', chromeHeight, 'px');
使い分け
- innerWidth/Height: コンテンツスペースの計算、ポップアップの配置、スクロール動作の決定に使用
- outerWidth/Height: ウィンドウ全体のフットプリントの確認、開発者ツールパネルの検出に使用
- clientWidth: CSS相当のビューポート幅（スクロールバーを除外）に使用
ユースケース
レイアウトの問題をデバッグするフロントエンド開発者は、ブラウザクロームとスクロールバーの幅を考慮するためにinner/outer寸法を理解する必要があります。