プログラミング世界へよこそ

JS Screenオブジェクト：画面情報の取得

JS Screenオブジェクト：画面情報の取得
 
 
JavaScript screen オブジェクトには、解像度、幅、高さなど、コンピューター画面に関する情報が含まれています。これは、window オブジェクトの screen プロパティを介して取得できます。 window オブジェクトはグローバル オブジェクトであるため、 window.screenを使用する場合は window 接頭辞を省略できます。たとえば、 window.screen.width screen.widthと省略できます。

 

コンテンツ 非表示
1. 画面オブジェクトのプロパティ
2. 画面の幅と高さを取得する
3. 「JS Screenオブジェクト：画面情報の取得」についてわかりやすく解説！絶対に観るべきベスト2動画

画面オブジェクトのプロパティ

次の表に、JavaScript 画面オブジェクトで一般的に使用されるプロパティとその説明を示します。

属性 例証する
availTop 画面の上端の最初のピクセルを返します (ほとんどの場合、0 を返します)。
availLeft 画面の左端の最初のピクセルを返します (ほとんどの場合、0 が返されます)。
availHeight 画面の高さを返します(Windowsタスクバーを除く)。
availWidth 画面の幅を返します(Windowsタスクバーを除く)。
colorDepth 画面の色深度を返します。これは、CSSOM (CSS Object Model) ビューに従って、互換性のために常に 24 です。
height 画面の全高を返します
pixelDepth 画面のビット深度/色深度を返します。これは、CSSOM (CSS Object Model) ビューに従って、互換性のために常に 24 です。
width 画面の全幅を返します
orientation 現在の画面の向きを返します

サンプルコードは次のとおりです。

 document.write(screen.availTop + "<br>");   // 出力：0
document.write(screen.availLeft + "<br>");  // 出力：0
document.write(screen.availHeight + "<br>");// 出力：1050
document.write(screen.availWidth + "<br>"); // 出力：1920
document.write(screen.height + "<br>");     // 出力：1080
document.write(screen.width + "<br>");      // 出力：1920
document.write(screen.colorDepth + "<br>"); // 出力：24
document.write(screen.pixelDepth + "<br>"); // 出力：24
console.log(screen.orientation);            // 出力：ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}

画面の幅と高さを取得する

スクリーン オブジェクトの幅と高さのプロパティを使用して、ユーザーのコンピューター画面の幅と高さ (ピクセル単位) を取得できます。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onclick="getResolution();">画面の幅と高さを取得する</button>
    <script type="text/javascript">
        function getResolution() {
            alert("あなたのコンピュータの画面サイズは：" + screen.width + "x" + screen.height + "です。");
        }
    </script>
</body>
</html>

実行結果を次の図に示します。

図 1: 画面の幅と高さを取得する
図 1: 画面の幅と高さを取得する
画面の色深度を取得する

screen オブジェクトの colorDepth プロパティを使用して、ユーザーのコンピュータ画面の色深度を取得できます。サンプル コードは次のとおりです。

ヒント: 色深度は、画面が生成できる色数を示します。たとえば、色深度が 8 の画面は 256 色 (つまり 2 8 ) を生成できます。現在のほとんどの画面の色深度は 24 または 32 であり、一部の古いモニターでは深さは 8 または 16 です。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onclick="getColorDepth();">カラーデプスを取得</button>
    <script type="text/javascript">
        function getColorDepth() {
            alert("あなたのコンピュータースクリーンのカラーデプスは：" + screen.colorDepth);
        }
    </script>
</body>
</html>

実行結果を次の図に示します。

図 2: 画面の色深度を取得する
図 2: 画面の色深度を取得する
 

「JS Screenオブジェクト：画面情報の取得」についてわかりやすく解説！絶対に観るべきベスト2動画

【JS】今の時刻を画面に表示しよう – 変数・定数・Dateオブジェクト
How to display a JSON representation and not Object Object on the screen

admin