ウィンドウの幅と高さを取得する(window.innerWidth,window.outerWidth,他)

JavaScript を使いウィンドウの幅と高さを取得する方法について解説します。 window.outerWidth プロパティと window.outerHeight プロパティを参照するとブラウザの幅と高さを参照でき、 window.innerWidth プロパティと window.innerHeight プロパティを参照するとコンテンツを表示する領域の幅と高さを取得することができます。

(Last modified: )

ウィンドウの幅と高さを取得する

ウィンドウの幅と高さを取得するためのプロパティとして次の 4 つが用意されています。 

window.outerWidth   ブラウザの幅
window.outerHeight  ブラウザの高さ
window.innerWidth   コンテンツ表示領域の幅
window.innerHeight  コンテンツ表示領域の高さ

それぞれのプロパティで取得できる幅と高さについては次の図を参照されてください。

ウィンドウの幅と高さを取得する(1)

※ ただ PC の環境で実際に計測してみると、 outerWidth と outerHeight は実際のブラウザのサイズよりも決まったサイズだけ大きく計測されました。

なおスクロールバーが表示されている場合 window.innerWidth と window.innerHeight はスクロールバーも含めたサイズとなります。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<h1>ウィンドウの幅と高さ</h1>

<p>ボタンをクリックすると幅と高さを取得します</p>

<input type="button" value="サイズ取得" id="btn">

<p>幅と高さは次のプロパティを参照します</p>

<ul>
<li>window.outerWidth   ブラウザの幅</li>
<li>window.outerHeight  ブラウザの高さ</li>
<li>window.innerWidth   コンテンツ表示領域の幅</li>
<li>window.innerHeight  コンテンツ表示領域の高さ</li>
</ul>

<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    console.log('outerWitdh :' + window.outerWidth);
    console.log('outerHeight:' + window.outerHeight);
    console.log('innerWidth: ' + window.innerWidth);
    console.log('innerHeight:' + window.innerHeight);
});
</script>

</body>
</html>

画面に表示されているボタンをクリックするとブラウザ外観の幅と高さ、そしてコンテンツ表示領域の幅と高さをそれぞれ取得してコンソールに出力します。

ウィンドウの幅と高さを取得する(2)

ウィンドウの幅と高さを取得する(3)

スクロールバーを除いた幅と高さを取得する

window.innerWidth プロパティと window.innerHeight プロパティはスクロールバーが表示されている場合、スクロールバーも含めた幅と高さを返します。スクロールバーを除いた幅と高さが必要な場合は、代わりに document.documentElement.clientWidth プロパティと document.documentElement.clientHeight プロパティを参照してください。 

document.documentElement.clientWidth
document.documentElement.clientHeight

clientWidth プロパティと clientHeight プロパティは対象の要素の内側のサイズを返します。このサイズにはスクロールバーが含まれません。コンテンツ表示領域のサイズを取得するには html 要素の clientWidth プロパティと clientHeight プロパティを参照します。

※ document.documentElement は document のルート要素( HTML ページの場合は html 要素)を返します。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<h1>ウィンドウの幅と高さ</h1>

<p>ボタンをクリックすると幅と高さを取得します</p>

<input type="button" value="サイズ取得" id="btn">

<p>幅と高さは次のプロパティを参照します</p>

<ul>
<li>window.outerWidth   ブラウザの幅</li>
<li>window.outerHeight  ブラウザの高さ</li>
<li>window.innerWidth   コンテンツ表示領域の幅</li>
<li>window.innerHeight  コンテンツ表示領域の高さ</li>
</ul>

<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    console.log('innerWidth  :' + window.innerWidth);
    console.log('innerHeight :' + window.innerHeight);

    const htmlelement = document.documentElement
    console.log('clientWidth :' + htmlelement.clientWidth);
    console.log('clientHeight:' + htmlelement.clientHeight);
});
</script>

</body>
</html>

画面に表示されているボタンをクリックするとコンテンツ表示領域の幅と高さ、およびスクロールバーの部分を除いた幅と高さをそれぞれ取得してコンソールに出力します。

スクロールバーを除いた幅と高さを取得する(1)

スクロールバーを除いた幅と高さを取得する(2)

現在は縦スクロールバーだけが表示されていたので、縦スクロールバーを表示するのに必要な 17px 分だけ window.innerWidth プロパティよりも document.documentElement.clientWidth プロパティの値が少なくなっています。

-- --

JavaScript を使いウィンドウの幅と高さを取得する方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。