デバイスのディスプレイ特性を検出する方法


デバイスのディスプレイ特性を検出する方法

はじめに

JavaScriptやCSSのメディアクエリを使用して、デバイスのディスプレイサイズを検出し、そのサイズに対応できます。たとえば、画面の幅と高さに基づいてページの背景色を変更することが可能です。ディスプレイサイズの測定に使用できる指標は2つあり、1つは画面サイズ、もう1つはビューポートサイズです。

  • 画面サイズは、デバイスの物理画面サイズを示します。
  • ビューポートサイズは、画面のウィンドウのサイズを示します。

ScreenSizeのサンプルでは、JavaScriptとCSSを使用してデバイスのディスプレイのサイズを検出し、そのサイズに対応する方法が示されます。このサンプルのコードは、Amazon Web App SDKの次のフォルダにあります。

Amazon-Web-SDKs/Webapps/examples/Cookbook/ScreenSize/

Amazon Web App SDKは、Amazon Developer SDKからダウンロードしてください([Web] ボタンをクリック)。

JavaScriptを使用したディスプレイ特性の検出

JavaScriptを使用してディスプレイサイズを検出する場合は、オブジェクトが2つあり、それぞれディスプレイサイズの指標2つに対応しています。

  • screenオブジェクトには画像サイズに関する情報が含まれています。
  • windowオブジェクトにはビューポートのサイズに関する情報が含まれています。

次のプロパティについてはscreenオブジェクトでクエリを実行できます。

セレクター min-およびmax-修飾子を受け入れる 説明 メディアクエリの使用例
height あり ウィンドウの高さを表します。 `@media screen and (min-height: 640px) { ... }`
width あり ウィンドウの幅を表します。 `@media screen and (min-width: 640px) and (max-width: 800px) { ... }`
aspect-ratio あり ウィンドウの縦横比を表します。値はスラッシュ(/)で区切られた2つの正の整数値で構成され、横のピクセル(最初の値)と縦のピクセル(2番目の値)の比率を示します。 `@media screen and (min-aspect-ratio: 1/1) { ... }`
device-height あり 画面全体の高さを表します。 `@media screen and (min-device-height: 640px) { ... }`
device-width あり 画面全体の幅を表します。 `@media screen and (min-device-width: 640px) { ... }`
device-aspect-ratio あり 画面全体の縦横比を表します。値はスラッシュ(/)で区切られた2つの正の整数値で構成され、横のピクセル(最初の値)と縦のピクセル(2番目の値)の比率を示します。 `@media screen and (min-device-aspect-ratio: 16/9) { ... }`
orientation なし ビューポートが横向きか縦向きかを示します。 `@media screen and (orientation: portrait) { ... }`
resolution あり 出力デバイスの解像度(ピクセル密度)を示します。 `@media screen and (min-resolution: 2dppx) { ... }`

CSSを使用したディスプレイ特性の検出

CSSのメディアクエリを使用して、さまざまなディスプレイサイズを検出し、そのサイズに対応します。次のCSSセレクターを使用して、ウィンドウのサイズや画面サイズを検出します。

CSSメディアクエリの例

デバイスが現在縦向きであるか横向きであるかに基づいて背景色を変更するには、次のサンプルコードを使用します。

/* 縦向きのときは青の背景 */
@media screen and (orientation: portrait) { background: #88F; }

/* 横向きのときは緑の背景 */
@media screen and (orientation: landscape) { background: #8F8; }

出力デバイスの解像度(ピクセル密度)に基づいて背景色を変更するには、次のサンプルコードを使用します。

/* 各ピクセルのピクセル密度が1~2ドットの間のときは青の背景 */
@media screen and (min-resolution: 1dppx) and (max-resolution: 2dppx) { background: #88F; }

/* 各ピクセルのピクセル密度が2ドット以上のときは緑の背景 */
@media screen and (min-resolution: 2dppx) { background: #8F8; }