現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

スクリーン

【JavaScript入門】screen.widthとは?モニタの幅(画面サイズ)を取得する方法をわかりやすく解説

投稿日:2019年5月27日 更新日:

JavaScriptのscreen.widthとは?モニタの幅(画面サイズ)を取得する方法を解説

screen.width は、モニタ全体の横幅(ピクセル数)を取得するためのプロパティです。
ユーザーの画面サイズに応じてレイアウトを調整したいときに役立ちます。



widthプロパティとは?

screen.width は、モニタの表示領域全体の幅を返します。
タスクバーやメニューバーの有無に関係なく、純粋な画面の横幅が取得できます。

  • モニタ全体の幅(ピクセル)を取得
  • レスポンシブデザインや画面最適化に利用可能

例:フルHDモニタなら 1920 が返ります。



使用例:モニタの幅を取得して表示する

以下は、ページ読み込み時に screen.width を取得し、フォームに表示するサンプルです。

<html>
<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 とは異なり、タスクバーなどを除外しない値

関連リンク

-スクリーン
-

執筆者:

関連記事

【JavaScript入門】screen.availWidthとは?有効表示領域の幅を取得する方法をわかりやすく解説

JavaScriptのscreen.availWidthとは?有効表示領域の幅を取得する方法を解説 screen.availWidth は、モニタの表示領域からタスクバーやメニューバーなどを除いた「実 …

【JavaScript入門】screen.availLeftとは?有効表示領域の左端X座標を取得する方法を解説

JavaScriptのscreen.availLeftとは?有効表示領域の左端X座標を取得する方法を解説 screen.availLeft は、モニタの有効領域(タスクバーやメニューバーを除いた部分) …

【JavaScript入門】screen.colorDepthとは?モニタの色深度(ビット数)を取得する方法を解説

JavaScriptのscreen.colorDepthとは?モニタの色深度(表示色数)を取得する方法を解説 screen.colorDepth は、モニタが表示できる色数(色深度)をビット値で返すプ …

【JavaScript入門】screen.pixelDepthとは?オフスクリーンの色深度を取得する方法をわかりやすく解説

JavaScriptのscreen.pixelDepthとは?オフスクリーンの色深度を取得する方法を解説 screen.pixelDepth は、モニタのオフスクリーン領域が使用している色深度(1ピク …

【JavaScript入門】screen.availHeightとは?有効表示領域の高さを取得する方法をわかりやすく解説

JavaScriptのscreen.availHeightとは?有効表示領域の高さを取得する方法を解説 screen.availHeight は、モニタの表示領域からタスクバーやメニューバーなどを除い …