JavaScriptのscreen.widthとは?モニタの幅(画面サイズ)を取得する方法を解説
screen.width は、モニタ全体の横幅(ピクセル数)を取得するためのプロパティです。
ユーザーの画面サイズに応じてレイアウトを調整したいときに役立ちます。
widthプロパティとは?
screen.width は、モニタの表示領域全体の幅を返します。
タスクバーやメニューバーの有無に関係なく、純粋な画面の横幅が取得できます。
- モニタ全体の幅(ピクセル)を取得
- レスポンシブデザインや画面最適化に利用可能
例:フルHDモニタなら 1920 が返ります。
使用例:モニタの幅を取得して表示する
以下は、ページ読み込み時に screen.width を取得し、フォームに表示するサンプルです。
<head>
<title>JavaScript Sample</title>
<script>
function formInitialize() {
// モニタの幅を表示
document.getElementById(“avail”).value = screen.width;
}
</script>
</head>
<body onload=”formInitialize()”>
<p><b>モニタの表示サイズが表示されます。</b></p>
<form>
<p>モニタの幅は <input type=”text” id=”avail” size=”8″> ピクセルです。</p>
</form>
</body>
</html>
→ 読み込み時に自動でモニタの幅が表示されます。
screen.width の用途
- 画面サイズに応じたレイアウト調整
- ウィンドウサイズの初期設定
- ユーザー環境の画面幅を調査
関連プロパティ
screen.height:モニタ全体の高さscreen.availWidth:有効領域の幅screen.availHeight:有効領域の高さ
まとめ
screen.widthはモニタ全体の横幅を返すプロパティ- 画面レイアウトの最適化に役立つ
- availWidth とは異なり、タスクバーなどを除外しない値