このページは Cloud Translation API によって翻訳されました。

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

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

Android 搭載デバイス向けのウェブページをターゲットに設定する場合は、主に 2 つの要素を考慮します。対象:

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

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

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

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

ほとんど Android のウェブブラウザ（Chrome など）では、デフォルトでビューポートに大きなサイズが設定されます。このワイドビューポートモードは約 980 ピクセル幅です。また、多くのブラウザでは、最大限広い範囲までズームアウトします。概要モードと呼ばれます。

</ph> 注: ページが WebView でレンダリングされる場合、広いビューポートは使用されません。モードです。ワイドビューポートモードを有効にするには、 setUseWideViewPort()。

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

次の構文は、サポートされているすべてのビューポートプロパティと値のタイプを示しています採用しています。

<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 をサポートしています。では、特定の画面密度のスタイルを作成できます。これに適用する値は feature は、スタイルが低、中、または低高密度画面に適しています

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

<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 をサポートしています。を使用すると、現在のデバイスの密度をクエリできます。このプロパティの値には、係数が設定されます。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");
}