支持Web应用程序中的不同屏幕（五）

由于Android可用于具有各种屏幕尺寸和像素密度的设备，因此您应该在网页设计中考虑这些因素，以便您的网页始终以适当的大小显示。WebView支持DOM，CSS和元标记功能，可帮助您确保正确呈现Web内容。

在针对Android设备定位您的网页时，您应该考虑以下两个主要因素：

视口

视口是矩形区域，为您的网页提供可绘制区域。您可以指定多个视口属性，例如其大小和初始比例。最重要的是视口宽度，它定义了从网页的角度（可用的CSS像素数）可用的水平像素总数。

屏幕密度

Android上的WebView类和大多数Web浏览器将您的CSS像素值转换为与密度无关的像素值，因此您的网页显示为与中等密度屏幕（大约160dpi）相同的可感知大小。但是，如果图形是网页设计的重要元素，则应密切关注在不同密度下发生的缩放，因为320dpi屏幕上的300px宽图像将按比例放大（每个CSS像素使用更多物理像素），可以产生模糊和像素化等伪像。为简单起见，Android将大多数较小的屏幕密度折叠为几个常规类别：小型，中型和大型。要了解有关屏幕密度的更多信息，请阅读有关屏幕密度的此培训。
请参阅以下相关资源：

WebView中的Pixel-Perfect UI
创建移动优先响应式Web设计
可变像素密度的高DPI图像

一、指定视口属性

视口是绘制网页的区域。尽管视口的总可见区域在完全缩放时与屏幕大小相匹配，但视口具有自己的像素尺寸，可供网页使用。例如，虽然设备屏幕的物理宽度可能为480像素，但视口的宽度可以为800像素。当视口比例为1.0时，这允许设计为800像素宽的网页在屏幕上完全可见。 Android上的大多数Web浏览器（包括Chrome）默认情况下将视口设置为大尺寸（称为“宽视口模式”，宽度约为980px）。默认情况下，许多浏览器也会尽可能缩小以显示完整的视口宽度（称为“概览模式”）。

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

在为移动设备优化站点时，通常应将宽度设置为“设备宽度”，以使大小完全适合所有设备，然后使用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" />

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

#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.75x。当然，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");
}