Screenオブジェクト

Screenオブジェクトを試してみます。
ScreenオブジェクトはWindowオブジェクトの画面に関係する情報を提供します。

下記にサンプルコードを書いてみます。

let scr1 = screen.availWidth;
console.log('scr1 -> ' + scr1);

let scr2 = screen.availHeight;
console.log('scr2 -> ' + scr2);

let scr3 = screen.colorDepth;
console.log('scr3 -> ' + scr3);

let scr4 = screen.pixelDepth;
console.log('scr4 -> ' + scr4);

上記を実行すると、下記のような結果になります。

scr1 -> 1920
scr2 -> 1170
scr3 -> 24
scr4 -> 24

検証に使用したPCでは、有効画面幅1920px、有効画面高さ1170px、画面の色深度24、仮想画面の色深度24という値が出力されました。
この値は実行するPCやブラウザにより影響を受けるので、それぞれのマシンでの値が出力されます。

また、有効画面の幅と高さではなく、物理的なモニターの幅と高さを求めるには、次の出力命令を使います。

let scr5 = screen.width;
console.log('scr5 -> ' + scr5);

let scr6 = screen.height;
console.log('scr6 -> ' + scr6);

出力結果は

scr5 -> 1920
scr6 -> 1200

となり、実際のモニターのサイズ(WUXGA)の値が出力されます。(出力結果は実行するPC環境によって大きく異なります)