開発者コンソール
ログイン
ログイン
開発者コンソール

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

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

はじめに

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

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

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

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

Amazon Web App SDKは、SDKのダウンロードページからダウンロードしてください（[ウェブアプリ] をクリック）。

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; }