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

JavaScriptで画面の有効幅・有効高さを取得する方法（availWidth／availHeight）

JavaScriptでは、window.screenオブジェクトを使うことで、ブラウザが動作している画面（ディスプレイ）に関するさまざまな情報を取得できます。その中でも、screen.availWidthとscreen.availHeightプロパティを使用すると、タスクバーなどのOSのインターフェース要素を除いた「実際に利用できる」画面の幅と高さを取得することが可能です。

この記事では、それぞれのプロパティの特徴と使い方を、サンプルコード付きでわかりやすく解説します。

画面の有効幅（availWidth）を取得する

screen.availWidthプロパティは、画面全体の幅からWindowsのタスクバーなど、インターフェースが占める領域を差し引いた、実際に利用可能な幅を返します。戻り値の単位はピクセル（px）です。

サンプルコード

<html>
<body>
<p id="width"></p>
<script>
   document.getElementById("width").innerHTML =
   "利用可能な画面の幅は " + screen.availWidth + " です";
</script>
</body>
</html>

実行結果

利用可能な画面の幅は 1366 です

画面の有効高さ（availHeight）を取得する

screen.availHeightプロパティは、画面全体の高さから、Windowsのタスクバーのようなインターフェース領域を除いた、実際に利用可能な高さを返します。こちらも単位はピクセル（px）です。

サンプルコード

<html>
<body>
<p id="height"></p>
<script>
   document.getElementById("height").innerHTML =
   "利用可能な画面の高さは " + screen.availHeight + " です";
</script>
</body>
</html>

実行結果

利用可能な画面の高さは 728 です

avail系プロパティとwidth・heightの違い

screen.widthやscreen.heightが画面全体のサイズを返すのに対し、screen.availWidthやscreen.availHeightはタスクバーなどのシステムUIを除外した値を返します。そのため、ブラウザウィンドウの表示可能領域を想定したレイアウト計算やレスポンシブ対応の処理を行う場合には、avail系プロパティを使う方が適しています。

  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