Google は、黒人コミュニティに対する人種平等の促進に取り組んでいます。取り組みを見る

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

Android はさまざまな画面サイズやピクセル密度のデバイスで使用できるため、ページが常に適切なサイズで表示されるように、ウェブデザインでこうした要因を考慮する必要があります。WebView は、ウェブ コンテンツが適切にレンダリングされるように、DOM、CSS、メタタグの機能をサポートしています。

Android デバイス向けのウェブページをターゲットにする際は、主に次の 2 つの要素を考慮します。

ビューポート
ビューポートは、ウェブページの描画可能領域を提供する長方形の領域です。サイズや初期スケールなど、いくつかのビューポート プロパティを指定できます。最も重要なのは、ビューポートの幅です。ウェブページの観点から使用できる水平ピクセルの総数(使用できる CSS ピクセルの数)です。
画面密度
WebView クラスと Android のほとんどのウェブブラウザで CSS ピクセル値が密度に依存しないピクセル値に変換されるため、ウェブページは中密度の画面と認識できる程度のサイズ(約 160 dpi)で表示されます。ただし、グラフィックがウェブデザインの重要な要素である場合、320 dpi 画面に 300 ピクセル幅の画像が表示されるため、さまざまな密度に応じて行われるスケーリングに細心の注意を払う必要があります(CSS ピクセルあたりの物理ピクセル数を増やした場合)。これにより、ぼかしやピクセル化などのアーティファクトが生じる可能性があります。単純化のため、Android では大部分の小さい画面密度をいくつかの一般的なカテゴリ(小、中、大)にまとめています。画面密度の詳細については、画面密度に関するトレーニングをご覧ください。

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

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

ビューポートはウェブページが描画される領域です。ビューポートの全可視領域は、ズームしたときの画面のサイズと一致しますが、ビューポートにはウェブページで使用できる独自のピクセル ディメンションがあります。たとえば、デバイス画面の物理的な幅は 480 ピクセルでも、ビューポートの幅は 800 ピクセルにすることが可能です。これにより、ビューポートのスケールが 1.0 の場合、画面に 800 ピクセル幅で設計されたウェブページを完全に表示できます。Android のほとんどのウェブブラウザ(Chrome など)では、デフォルトでビューポートが大きなサイズに設定されています(約 980 ピクセル幅の「ワイド ビューポート モード」として知られています)。また、多くのブラウザでは、デフォルトで可能な限りズームアウトして、ビューポートの幅全体を表示します(「概要モード」と呼ばれます)。

注: ページが WebView でレンダリングされる場合、デフォルトでは、ワイド ビューポート モードは使用されません(ページは最大ズームで表示されます)。ワイド ビューポート モードを有効にするには、setUseWideViewPort() を使用します。

ドキュメント <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 は、CSS メディア機能をサポートしています。この機能を使用すると、特定の画面密度のスタイルを作成できます(-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 を使用したデバイス密度のターゲット設定

WebView は、現在のデバイス密度を照会できる DOM プロパティをサポートしています(window.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");
    }