画面サイズを取得する

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

画面サイズ：横幅 = 1280 / 高さ = 720

ウィンドウサイズ：横幅 = 1280 / 高さ = 720

例文

<p>画面サイズ：<span id="ScrSize"></span></p>
<p>ウィンドウサイズ：<span id="WinSize"></span></p>

<script type="text/javascript">
//画面サイズの取得
getScreenSize();
//ウィンドウサイズの取得
getWindowSize();

//画面サイズを取得する
function getScreenSize() {
	var s = "横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height;
	document.getElementById("ScrSize").innerHTML = s;
}

//ウィンドウサイズを取得する
function getWindowSize() {
	var sW,sH,s;
	sW = window.innerWidth;
	sH = window.innerHeight;

	s = "横幅 = " + sW + " / 高さ = " + sH;
 
	document.getElementById("WinSize").innerHTML = s;
}
</script>

解説

画面サイズは、モニタ画面の解像度を示しています。
ウインドウサイズは、ブラウザの表示画面内部のサイズを示しています。

応用

ウィンドウサイズを変更すると、連動してリアルタイムにサイズが表示されます。

<form name="winsize">
ウィンドウサイズ：横幅 = <input name="sw" type="text" size="10"> / 高さ = <input name="sh" type="text" size="10">
</form>

<script type="text/javascript">
//読み込み時の表示
window_load();

//ウィンドウサイズ変更時に更新
window.onresize = window_load;

//サイズの表示
function window_load() {
	document.winsize.sw.value = window.innerWidth;
	document.winsize.sh.value = window.innerHeight;
}
</script>

次の応用では、フォームを使わず、DOMを使っています。スクリプトは最後の2行、出力先の違いです。

ウィンドウサイズ：横幅 = 1280 / 高さ = 720

<span id="winsize2"></span>

<script type="text/javascript">
//読み込み時の表示
window_load();

//ウィンドウサイズ変更時に更新
window.onresize = window_load;

//サイズの表示
function window_load() {
	var sW,sH,s;
	sW = window.innerWidth;
	sH = window.innerHeight;

	s = "ウィンドウサイズ：横幅 = " + sW + " / 高さ = " + sH;
	document.getElementById("winsize2").innerHTML = s;
}
</script>

「window.onresize = function()」は、２つあると正常に動作しませんので、複数の機能を盛り込むときは注意が必要です。

取得データ一覧

現在使用中のブラウザで各値の表示を確認してください。

戻る