JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで画面の幅と高さを取得する方法をわかりやすく解説

JavaScriptには、ユーザーの画面に関する情報を保持するwindow.screenオブジェクトが用意されています。このオブジェクトには、画面の高さや幅だけでなく、色の深度や利用可能な領域など、さまざまな情報が含まれています。

画面の高さと幅を取得するには、それぞれscreen.heightプロパティとscreen.widthプロパティを使用します。

画面の高さを取得する構文

screen.height;

画面の幅を取得する構文

screen.width;

どちらのプロパティも、戻り値はピクセル（px）単位の整数です。

例1：画面の幅を表示する

次の例では、screen.widthプロパティを使って画面の幅を取得し、画面に表示しています。

<html>
<body>
<p id="width"> </p>
    <script>
        document.getElementById("width").innerHTML =
        "画面の幅は " + screen.width + " ピクセルです";
    </script>
</body>
</html>

出力結果

画面の幅は 1366 ピクセルです

例2：画面の高さを表示する

次の例では、screen.heightプロパティを使って画面の高さを取得し、画面に表示しています。

<html>
<body>
    <p id="height"> </p>
    <script>
        document.getElementById("height").innerHTML =
        "画面の高さは " + screen.height + " ピクセルです";
    </script>
</body>
</html>

出力結果

画面の高さは 768 ピクセルです

補足：利用可能な画面領域を取得する

タスクバーやドックなどを除いた、実際に利用可能な画面領域を取得したい場合は、screen.availWidthおよびscreen.availHeightプロパティを使用します。

console.log(screen.availWidth);   // 利用可能な幅
console.log(screen.availHeight);  // 利用可能な高さ

なお、screen.widthやscreen.heightが返すのはモニター全体の解像度であり、ブラウザウィンドウのサイズではありません。ブラウザウィンドウのサイズを取得したい場合は、window.innerWidthやwindow.innerHeightを使用してください。

  1. Androidデバイスの画面の高さ・幅を取得する方法【サンプルコード付き】

    この記事では、Androidアプリで端末の画面の高さ（Height）と幅（Width）を取得する方法を、実際に動作するサンプルコードとともにステップごとに解説します。あわせて、画面サイズ（インチ数）を計算して表示する方法も紹介します。 仕組みのポイント：DisplayMetricsクラス Androidでは、DisplayMetricsクラスを使うことで、画面のピクセル数や密度（dpi）といったディスプレイ情報を簡単に取得できます。本記事のサンプルでは、このクラスを利用して画面の高さ・幅・インチ数を求めていきます。 手順1：Android Studioで新規プロジェクトを作成する Androi

  2. AndroidでImageViewの幅と高さを取得する方法【サンプルコード付き】

    この記事では、Androidアプリ開発において android.widget.ImageView の幅（width）と高さ（height）を取得する方法を、実際に動作するサンプルコードとともにステップごとに解説します。実装の全体像ImageViewのサイズを取得するには、getWidth() メソッドと getHeight() メソッドを使用します。ここでは、ボタンをタップしたときにImageViewのサイズを取得し、TextViewに結果を表示するシンプルなサンプルアプリを作成します。手順1：新しいプロジェクトを作成するAndroid Studioを起動し、メニューから「File」→「New