JavaScript screen.heightの使い方｜画面高さの取得【JavaScript入門】

画面の高さをJavaScriptで取得したいときは、screen.heightを使います。ただし、取得値はモニターの物理的な画素数そのものではありません。

この記事では、値の意味と使い方をコード例で説明します。画面全体の高さと、ブラウザー内でページを表示できる高さを取り違えないための選び方も分かります。

screen.heightで取得できる値

screen.heightは、画面の高さをCSSピクセル単位で返します。

JavaScriptは、Webページに動きを付けたり、ページ上の情報を扱ったりするためのプログラミング言語です。

screen.heightのように、決まった対象から値を読み取るための名前を「プロパティ」といいます。ここでは、screenが画面についての情報を持ち、heightがその高さを表します。

ここでいう「画面の高さ」は、画面を構成する物理的な点の数と必ず一致する値ではありません。画面の大きさや表示設定によって、物理画素とCSSピクセルの対応は変わることがあります。

screen.heightは、画面に関する情報をJavaScriptから読めるようにする機能の一つです。「API」とは、別のプログラムが機能や情報を使うための窓口を指します。

screen.heightと関連する高さの違い

screen.height、screen.availHeight、window.innerHeightは、どの範囲の高さを調べたいかで使い分けます。

ブラウザーは、Webページを開いて読むためのアプリです。

たとえば、ブラウザーの外枠やパソコンの画面上のシステム用領域があると、画面全体の高さとページを表示できる高さは異なります。画面全体を調べるならscreen.height、ページの表示領域を調べるならwindow.innerHeightを選びます。

windowは、ブラウザーで開いているページを表示する領域などを扱うものです。

画面上のシステム用領域には、たとえばタスクバーのようなものがあります。

screen.availHeightがどの範囲を表すかは、利用環境によって確認が必要です。画面全体の高さと利用可能な高さの違いを詳しく知りたい場合は、【JavaScript入門】screen.availHeightとは？有効表示領域の高さを取得する方法をわかりやすく解説も参考にしてください。

次の図は、画面全体の高さと、システム用領域を除いた高さの関係を示したものです。実際に除かれる領域や位置は環境によって異なります。

画面の高さを取得するコード

次の例では、screen.height、screen.availHeight、window.innerHeightの値をページ内に表示します。HTMLはページの見出しや文章などを作るための書き方です。

コードは説明用の例です。実際の取得値は、使う画面やブラウザーなどの環境で変わります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画面の高さを確認</title>
</head>
<body>
  <h1>画面の高さ</h1>
  <p id="result"></p>

  <script>
    const result = document.getElementById("result");

    result.textContent =
      "screen.height: " + window.screen.height + " CSSピクセル / " +
      "screen.availHeight: " + window.screen.availHeight + " CSSピクセル / " +
      "window.innerHeight: " + window.innerHeight + " CSSピクセル";
  </script>
</body>
</html>

この例では、document.getElementById("result")で、ページ内のidがresultの場所を見つけます。見つけた場所に、3つの値を文章として表示しています。

documentはページの内容を扱うための名前です。

idは、ページ内の場所を区別するために付ける名前です。

textContentは、その場所に表示する文字を指定するために使っています。ここでは、取得した数値を説明の文字とつなげて表示します。

コードを試す手順

1. 上のコードをすべてコピーします。
2. テキストを編集できるアプリに貼り付け、screen-height.htmlという名前で保存します。
3. 保存したファイルをブラウザーで開きます。
4. 画面に3つの高さが表示されることを確認します。
5. ブラウザーのウィンドウの高さを変え、window.innerHeightの値がどう変わるかを確認します。

表示結果の例：実際に表示される数値は環境によって異なります。次は、表示の形を示すための例であり、特定の環境で測定した結果ではありません。

screen.height: （取得した数値） CSSピクセル / screen.availHeight: （取得した数値） CSSピクセル / window.innerHeight: （取得した数値） CSSピクセル

画面上に値が表示されない場合は、コードを途中までしかコピーしていない、またはHTMLファイルとして保存できていない可能性があります。コード全体をコピーし、ファイル名の末尾が.htmlになっているか確認してください。

画面の高さをレイアウト調整に使うときの注意点

画面の高さに応じてページの見た目を変えることを、レイアウト調整といいます。ページの表示領域に合わせて内容を配置したい場合、screen.heightはブラウザーの表示領域そのものではないため、値をそのまま使うと意図と違う結果になることがあります。

ページの表示領域の高さを基準に処理したい場合は、window.innerHeightを検討します。画面全体の高さを調べる目的であればscreen.heightを使います。

ブラウザーの拡大・縮小や画面回転が値に与える影響は、利用環境をそろえて確認してください。確認していない環境の挙動を一律に決めつけることはできません。

画面の幅も含めて調べたい場合は、【JavaScript入門】screen.widthとは？モニタの幅（画面サイズ）を取得する方法をわかりやすく解説を参照してください。JavaScriptの画面情報を順に学ぶには、JavaScript Screenロードマップ｜初心者が最短で画面情報APIを理解するためのガイドが入口になります。

仕様の確認先と検証状況

screen.heightとscreen.availHeightの説明は、次の資料で確認できます。

• MDN Web Docs「Screen.height」
• MDN Web Docs「Screen.availHeight」
• MDN Web Docs「Window.innerHeight」

この記事の改修案では、特定のOS・ブラウザー・バージョンでの動作確認は行っていません。検証環境と確認日、実際に表示された値は未確認です。公開前に、対象環境でコードを実行して記録してください。