JavaScript

レシピ

ブラウザ

ブラウザのウインドウサイズを取得する

ブラウザのウインドウサイズ(横幅、高さ)を取得する方法について解説します。

この記事のポイント

  • ブラウザの表示エリアのみの横幅&高さを取得する
  • 高解像度でも通常の解像度と同じ値を取得できる

ブラウザの表示するエリアのサイズを取得する

windowオブジェクトinnerWidthプロパティinnerHeightプロパティを参照することで、ブラウザの表示エリアのサイズを取得することができます。

ブラウザの表示エリアのサイズを取得
ブラウザの表示エリアのサイズを取得

ここで取得できる横幅と高さは上図のように表示エリアのみで、URLバーやブックマークバー、コンソールなどのサイズは含みません。
以下のように横幅、高さのサイズを取得することができます。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JS Test</title>
	<script>
		window.addEventListener('load', (event) => {

			// ブラウザのウインドウサイズを取得する
			var window_w = window.innerWidth;
			var window_h = window.innerHeight;

			console.log(window_w);
			console.log(window_h);
		});
	</script>
</head>
<body>
<h1>JS Test</h1>
</body>
</html>

windowオブジェクトはグローバル変数として宣言されているため、上記コードのような「window」を省略して「innerWidth」や「innerHeight」と書いても参照できます。
また、取得できる値は端末の解像度は影響しないため、Retinaなどの高解像度ディスプレイでも通常の解像度と同じ値を取得することができます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。