ウェブアプリで異なる画面をサポートする

Android はさまざまな画面サイズとピクセル密度のデバイスで利用できるため、ページのサイズを適切に設定するには、ウェブデザインでこれらの要素を考慮してください。WebView は DOM、CSS、メタタグの機能をサポートし、ウェブ コンテンツを適切にレンダリングできるようにします。

ウェブページを Android 搭載デバイス向けにターゲット設定する場合、主に次の 2 つの要素を考慮する必要があります。

ビューポート
ビューポートは、ウェブページのドローアブル領域となる長方形の領域です。サイズや初期スケールなど、複数のビューポート プロパティを指定できます。最も重要なのはビューポートの幅です。これは、ウェブページの視点から使用できる水平方向のピクセル数(使用可能な CSS ピクセル数)を定義します。
画面密度
WebView クラスや Android のほとんどのウェブブラウザは、CSS ピクセル値を密度非依存ピクセル値に変換するため、ウェブページは中密度画面と同じ認識可能なサイズ(約 160 dpi)で表示されます。ただし、グラフィックがウェブデザインの重要な要素である場合は、さまざまな密度で発生するスケーリングに注意してください。たとえば、320 dpi の画面で幅が 300 ピクセルの画像はスケールアップされ、1 CSS ピクセルあたりの物理ピクセルが多くなります。これにより、ぼやけやピクセル化などのアーティファクトが発生することがあります。Android では、わかりやすくするために、ほとんどの小さな画面密度を小、中、大という一般的なカテゴリに分類しています。画面密度について詳しくは、各種のピクセル密度をサポートするをご覧ください。

以下の関連リソースもご覧ください。

ビューポートのプロパティを指定する

ビューポートはウェブページが描画される領域です。ビューポート全体に表示される領域の合計は、完全にズームアウトしたときの画面のサイズと一致しますが、ビューポートにはウェブページで利用できる独自のピクセルサイズがあります。たとえば、デバイス画面の物理幅が 480 ピクセルであっても、ビューポートの幅が 800 ピクセルである場合があります。これにより、800 ピクセル幅でデザインされたウェブページは、ビューポートのスケールが 1.0 のときに画面上に完全に表示されます。

Android のほとんどのウェブブラウザ(Chrome を含む)では、デフォルトでビューポートを大きくサイズに設定します。この [wide ビューポート モード] の幅は約 980 ピクセルです。また、多くのブラウザはデフォルトで、ビューポートの幅全体を表示するように可能な限りズームアウトします(概要モードと呼ばれます)。

幅や初期ズームレベルなど、ウェブページのビューポートのプロパティを定義するには、ドキュメント <head> 内で <meta name="viewport" ...> タグを使用します。

次の構文は、サポートされているすべてのビューポート プロパティと、それぞれが指定できる値の型を表示します。

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

たとえば、次の <meta> タグは、ビューポートの幅がデバイス画面の幅と一致し、ズーム機能が無効になっていることを指定しています。

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

サイトをモバイル デバイス向けに最適化する場合、通常は、すべてのデバイスにぴったり合うように幅を "device-width" に設定します。その後、CSS メディアクエリを使用して、さまざまな画面サイズに合わせて柔軟にレイアウトを調整します。

CSS によるターゲット デバイスの密度

WebView-webkit-device-pixel-ratio をサポートしています。これは、特定の画面密度のスタイルを作成できる CSS メディア機能です。この機能に適用する値は 0.75、1、1.5 のいずれかにする必要があります。これらは、それぞれ低密度、中密度、高密度の画面を備えたデバイス用のスタイルであることを示します。

密度ごとに個別のスタイルシートを作成できます。

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

または、1 つのスタイルシートに複数のスタイルを指定します。

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

さまざまな画面密度(特に画像)の処理の詳細については、可変ピクセル密度向けの高 DPI 画像をご覧ください。

JavaScript を使用してデバイス密度をターゲットに設定する

WebViewwindow.devicePixelRatio をサポートしています。これは、現在のデバイスの密度を照会できる DOM プロパティです。このプロパティの値は、現在のデバイスに使用されるスケーリング ファクタを指定します。window.devicePixelRatio の値が 1.0 の場合、デバイスは中密度デバイスとみなされ、デフォルトではスケーリングは適用されません。値が 1.5 の場合、そのデバイスは高密度デバイスとみなされ、ページはデフォルトで 1.5 倍に拡大されます。値が 0.75 の場合、そのデバイスは低密度デバイスとみなされ、ページはデフォルトで 0.75 倍に拡大されます。

Android ブラウザと WebView が適用するスケーリングは、ウェブページのターゲット密度に基づきます。ビューポートのターゲット密度を定義するセクションで説明したように、デフォルトのターゲットは中密度に設定されていますが、ターゲットを変更すると、さまざまな画面密度に応じたウェブページのスケーリング方法に影響を与えることができます。

たとえば、JavaScript を使用してデバイス密度を照会する方法は次のとおりです。

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}