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

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

スクリーン

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

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

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

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



heightプロパティとは?

screen.height は、モニタの表示領域全体の高さを返します。
タスクバーやメニューバーの有無に関係なく、純粋な画面の縦方向のサイズが取得できます。

  • モニタ全体の高さ(ピクセル)を取得
  • 画面レイアウトの最適化に利用可能

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



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

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

<html>
<head>
  <title>JavaScript Sample</title>
  <script>
    function formInitialize() {
      // モニタの高さを表示
      document.getElementById(“avail”).value = screen.height;
    }
  </script>
</head>

<body onload=”formInitialize()”>
  <p><b>モニタの表示サイズが表示されます。</b></p>
  <form>
    <p>モニタの高さは <input type=”text” id=”avail” size=”8″> ピクセルです。</p>
  </form>
</body>
</html>

→ 読み込み時に自動でモニタの高さが表示されます。



screen.height の用途

  • 画面サイズに応じたレイアウト調整
  • ウィンドウサイズの初期設定
  • ユーザー環境の画面高さを調査

関連プロパティ

  • screen.width:モニタ全体の幅
  • screen.availHeight:有効領域の高さ
  • screen.availWidth:有効領域の幅

まとめ

  • screen.height はモニタ全体の高さを返すプロパティ
  • 画面レイアウトの最適化に役立つ
  • availHeight とは異なり、タスクバーなどを除外しない値

関連リンク

-スクリーン
-

執筆者:

関連記事

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

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

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

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

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

JavaScriptのscreen.widthとは?モニタの幅(画面サイズ)を取得する方法を解説 screen.width は、モニタ全体の横幅(ピクセル数)を取得するためのプロパティです。 ユーザー …

【JavaScript入門】screen.availTopとは?有効表示領域の上端Y座標を取得する方法をわかりやすく解説

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

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

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