在 Web 应用中支持不同的屏幕

由于 Android 可在各种屏幕尺寸和像素密度的设备上使用，因此请在您的网页设计中考虑这些因素，以便您的页面能够适当地调整大小。 WebView 支持 DOM、CSS 和元标记功能，以帮助您适当地呈现网页内容。

在针对 Android 设备的网页时，需要考虑两个主要因素

视口: 视口是提供网页可绘制区域的矩形区域。您可以指定几个视口属性，例如其大小和初始缩放比例。最重要的是视口宽度，它定义了从网页的角度来看可用的水平像素总数——可用的 CSS 像素数。
屏幕密度: WebView 类和 Android 上的大多数 Web 浏览器会将您的 CSS 像素值转换为与密度无关的像素值，因此您的网页显示的大小与中等密度屏幕（约 160 dpi）相同。但是，如果图形是网页设计的重要元素，请注意不同密度下发生的缩放。例如，在 320 dpi 屏幕上宽度为 300 px 的图像会被放大——它每个 CSS 像素使用更多物理像素。这可能会产生模糊和像素化等伪像。为简单起见，Android 将大多数较小的屏幕密度折叠成几个通用类别：小、中和大。要了解有关屏幕密度的更多信息，请阅读支持不同的像素密度。

请参阅以下相关资源

指定视口属性

视口是绘制网页的区域。尽管视口的总可见区域在完全缩小到最小时与屏幕大小匹配，但视口有自己的像素尺寸，它会提供给网页。例如，尽管设备屏幕的物理宽度可能为 480 像素，但视口的宽度可以为 800 像素。当视口比例为 1.0 时，这允许宽度为 800 像素的网页在屏幕上完全可见。

Android 上的大多数 Web 浏览器（包括 Chrome）默认将视口设置为较大的尺寸。此 _宽视口模式_ 约为 980 px 宽。许多浏览器默认也会尽可能缩小以显示完整的视口宽度，称为 _概述模式_。

注意：当您的页面在 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 支持 -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" />

或在一个样式表中指定不同的样式

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

有关处理不同屏幕密度的更多信息，尤其是图像，请参阅适用于可变像素密度的 HiDPI 图像。

使用 JavaScript 针对设备密度

WebView 支持 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");
}