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

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

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

構文

availWidthプロパティの構文は次のとおりです。

screen.availWidth

サンプルコード

それでは、HTML Screen availWidthプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、現在の画面の利用可能な幅が表示されます。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show {
        font-size: 1.2rem;
        margin: 1rem auto;
        font-weight: bold;
        font-family: sans-serif;
    }
</style>
<body>
<h1>HTML screen availWidth Property</h1>
<button class="btn" onclick="get()">Show availWidth Value</button>
<div class="show"></div>
<script>
    function get() {
        document.querySelector(".show").innerHTML = "Available Width is " + screen.availWidth + " px";
    }
</script>
</body>
</html>

実行結果

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

画面上の「Show availWidth Value」ボタンをクリックすると、availWidthプロパティの値が次のように表示されます。

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

availWidthプロパティのポイント

  • 戻り値はピクセル単位の整数です。
  • 読み取り専用のプロパティのため、値を代入して変更することはできません。
  • WindowsのタスクバーやmacOSのDockなど、常に表示されるOS側のUI領域は含まれません。
  • 縦方向の利用可能な高さを取得したい場合は、screen.availHeightプロパティを使用します。
  1. HTML Screen pixelDepthプロパティとは？画面の色深度を取得する方法を解説

    HTMLの Screen pixelDepth プロパティは、ビジター（訪問者）の画面における色解像度（1ピクセルあたりのビット数）を返します。 構文 pixelDepthプロパティの基本的な構文は以下のとおりです。 screen.pixelDepth 戻り値について このプロパティは、画面の色深度を「ピクセルあたりのビット数（bits per pixel）」で表す整数値として返します。一般的なモニターでは 24 または 32 が返されるのがほとんどです。なお、screen.colorDepth プロパティもほぼ同じ値を返しますが、現代の主要ブラウザでは両者に実質的な違いはありません。 サンプ

  2. HTML Screen colorDepthプロパティの使い方をわかりやすく解説

    colorDepthプロパティとは HTMLのScreenインターフェースが持つcolorDepthプロパティは、画像を表示するために使用されるカラーパレットのビット深度（1ピクセルあたりのビット数）を返します。 現代の一般的なブラウザ環境では、この値はほとんどの場合「24」（約1,677万色表示可能）または「32」を返します。なお、同様の役割を持つscreen.pixelDepthプロパティと同じ値になることが多く、実用上はどちらを使っても大きな違いはありません。 構文 colorDepthプロパティの基本的な構文は以下のとおりです。 screen.colorDepth サンプルコード