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

JavaScriptのBOM（window.screen）でユーザーの画面情報を取得する方法

JavaScriptのBOM（Browser Object Model）には、ブラウザウィンドウやユーザー環境の情報を扱うためのさまざまなオブジェクトが用意されています。その中でもwindow.screenオブジェクトは、クライアント（ユーザー）の画面に関する情報を取得するために使用され、画面の幅・高さや色深度などをプログラムから参照できます。レスポンシブ対応やデバイスごとの表示最適化などにも役立ちます。

window.screenの主なプロパティ一覧

プロパティ説明
screen.widthユーザーの画面の幅をピクセル単位で返します。
screen.heightユーザーの画面の高さをピクセル単位で返します。
screen.availWidthタスクバーなどのOSインターフェース部分を除いた、実際に利用可能な画面の幅をピクセル単位で返します。
screen.availHeightタスクバーなどのOSインターフェース部分を除いた、実際に利用可能な画面の高さをピクセル単位で返します。
screen.colorDepth1つの色を表示するために使用されるビット数を返します（一般的には24または32が返されます）。
screen.pixelDepth画面のピクセル深度（1ピクセルあたりのビット数）を返します。

width / heightは画面全体のサイズを表すのに対し、availWidth / availHeightはタスクバーなどに占有された領域を除いた「実際にコンテンツを表示できるサイズ」である点がポイントです。

以下は、JavaScriptのBOMウィンドウ画面（window.screen）を使って画面情報を取得するサンプルコードです。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
    font-size: 18px;
    font-weight: 500;
    color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript BOM Window Screen</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to get information about your screen</h3>
<script>
let resultEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
    resultEle.innerHTML = 'screen.width = '+screen.width+'<br>';
    resultEle.innerHTML += 'screen.height = '+screen.height+'<br>';
    resultEle.innerHTML += 'screen.availWidth = '+screen.availWidth+'<br>';
    resultEle.innerHTML += 'screen.availHeight = '+screen.availHeight+'<br>';
    resultEle.innerHTML += 'screen.colorDepth = '+screen.colorDepth+'<br>';
    resultEle.innerHTML += 'screen.pixelDepth = '+screen.pixelDepth+'<br>';
});
</script>
</body>
</html>

実行結果

このコードを実行すると、ページには出力用のエリアと「CLICK HERE」ボタンが表示されます。

JavaScriptのBOM（window.screen）でユーザーの画面情報を取得する方法

ボタンをクリックすると、以下のように画面の幅・高さ、タスクバー等を除いた利用可能なサイズ、色深度、ピクセル深度といった画面に関する各種情報が出力エリアへ順番に表示されます。

JavaScriptのBOM（window.screen）でユーザーの画面情報を取得する方法


  1. JavaScriptでiframeをフルスクリーン表示に設定する方法

    Webページに埋め込んだiframe（インラインフレーム）を、ボタン操作ひとつで画面いっぱいに表示できたら便利ですよね。JavaScriptを使えば、CSSクラスの付け替えだけでこの動作をシンプルに実装できます。 サンプルコード 以下は、ボタンをクリックするとiframeが全画面サイズに切り替わるサンプルです。iframeに対して幅「100vw」・高さ「100vh」を指定したCSSクラスを適用しています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-

  2. JavaScriptでリンクを新しいポップアップウィンドウで開く方法

    window.open()を使ってポップアップウィンドウを開くリンクをクリックしたときに新しいポップアップウィンドウを表示したい場合は、JavaScriptのwindow.open()メソッドを使用します。<a>タグにtarget=popup属性を指定し、onclickイベントでwindow.open()を呼び出すことで、指定したサイズのポップアップウィンドウを簡単に開くことができます。ポイントwindow.open(URL, ウィンドウ名, オプション): 第1引数にURL、第2引数にウィンドウ名、第3引数に幅や高さなどのオプションを指定します。return false;: リン