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

JavaScriptのscreen.availWidthプロパティとは？画面の有効幅を取得する方法

JavaScriptの screen.availWidth プロパティを使うと、ユーザーの画面（スクリーン）の有効な横幅を取得できます。返される値はピクセル単位で、タスクバーなどのOSが占有している領域は含まれません。

availWidthプロパティの特徴

screen.availWidth には以下のような特徴があります。

  • 戻り値は整数値（ピクセル単位）で返されます
  • Windowsであればタスクバーの幅は除外されます
  • 読み取り専用のプロパティのため、値を変更することはできません
  • すべての主要ブラウザ（Chrome、Firefox、Safari、Edgeなど）でサポートされています

基本的な使い方

次のコードを実行すると、JavaScriptで screen.availWidth プロパティを扱う方法を確認できます。

<!DOCTYPE html>
<html>
   <body>
      <script>
         document.write("ユーザー画面の有効な横幅: " + screen.availWidth);
     </script>
  </body>
</html>

実行結果の例

たとえば、横幅1920pxのモニターでタスクバーの高さ分を除いた場合、出力例は次のようになります。

ユーザー画面の有効な横幅: 1920

availHeightとの組み合わせ

同様に、screen.availHeight プロパティを使えば、タスクバーなどを除いた画面の有効な高さを取得できます。両方を組み合わせることで、ブラウザウィンドウが実際に使用できる画面領域のサイズを把握できます。

<script>
   document.write("有効な横幅: " + screen.availWidth + "px<br>");
   document.write("有効な高さ: " + screen.availHeight + "px");
</script>

注意点

screen.availWidth が返すのは「デバイス全体の画面」のサイズであり、現在開いているブラウザウィンドウのサイズではありません。ブラウザウィンドウの幅や高さを取得したい場合は、window.innerWidth や window.innerHeight を使用してください。また、複数モニター環境ではメインモニターの値が返される点にも留意しましょう。

  1. JavaScriptのsourceプロパティとは？正規表現パターンテキストを取得する方法を解説

    JavaScriptのsourceプロパティは、RegExp（正規表現）オブジェクトに設定されたパターン文字列そのものを返すプロパティです。g（グローバルマッチ）やi（大文字・小文字を区別しない）などのフラグは結果に含まれず、マッチング対象となる純粋な正規表現テキストのみを取得できます。 動的に正規表現を組み立てたい場合や、デバッグ時に実際に適用されているパターンを確認したい場合などに活用できる便利なプロパティです。 基本構文 const regex = /pattern/flags; console.log(regex.source); // パターン文字列のみが返される サンプルコード

  2. HTML Screen availWidthプロパティとは?画面の利用可能な幅を取得する方法を解説

    HTMLのscreen.availWidthプロパティは、ユーザーのスクリーン上で実際に利用可能な幅をピクセル単位で返します。戻り値には、タスクバーやブラウザのツールバーといったOS・ブラウザのインターフェース領域は含まれません。そのため、画面全体の幅を返すscreen.widthとは異なり、Webページが実際に表示できる領域の幅を知りたい場合に役立ちます。構文availWidthプロパティの構文は次のとおりです。screen.availWidthサンプルコードそれでは、HTML Screen availWidthプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、現在の画面の