画面サイズを取得する

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


戻る

実例

画面サイズ:

ウィンドウサイズ:

例文

<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行、出力先の違いです。

-

<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()」は、2つあると正常に動作しませんので、複数の機能を盛り込むときは注意が必要です。

取得データ一覧

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

横幅 高さ 解説
screen.width screen.height モニターの解像度
screen.availWidth screen.availHeight モニターの利用可能領域
window.innerWidth window.innerHeight ウィンドウビューポートの幅/高さ(スクロールバーを含む)
window.outerWidth window.outerHeight ウィンドウ外観の幅/高さ
document.width document.height IE非対応/Gekko6.0より不採用
document.body.clientWidth document.body.clientHeight ドキュメント全体の幅/高さ
document.documentElement.clientWidth document.documentElement.clientHeight ドキュメントの表示領域
左からのスクロール量 上からのスクロール量 対応表
window.scrollX window.scrollY - Firefox Safari Chrome
document.body.scrollLeft document.body.scrollTop IE6まで - Safari Chrome
document.documentElement.scrollLeft document.documentElement.scrollTop IE7から Firefox - -

戻る