在 Web 应用中支持不同屏幕

由于 Android 可用于具有各种屏幕尺寸和像素密度的设备，请在 Web 设计中考虑这些因素，以便您的页面具有适当的大小。WebView 支持 DOM、CSS 和 meta 标签功能，可帮助您适当地呈现 Web 内容。

在将网页定位到 Android 设备时，需要考虑两个主要因素：

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

请参阅以下相关资源：

指定视口属性

视口是绘制网页的区域。虽然完全缩小时视口的总可见区域与屏幕尺寸匹配，但视口有其自己的像素尺寸，可供网页使用。例如，虽然设备的屏幕物理宽度可能为 480 像素，但视口宽度可以为 800 像素。这使得设计为 800 像素宽的网页在视口缩放比例为 1.0 时可以完全显示在屏幕上。

Android 上的大多数 Web 浏览器（包括 Chrome）默认将视口设置为较大尺寸。此 _宽视口模式_ 大约有 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" />

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

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