支持不同屏幕的Web Apps
由于Android可用于具有各种屏幕尺寸和像素密度的设备，因此您应该在网页设计中考虑到这些因素，以便您的网页始终以适当的大小显示。
当您定位到Android设备的网页时，您应该考虑以下两个主要因素：
视口
视口是为您的网页提供可绘制区域的矩形区域。 您可以指定多个视口属性，例如其大小和初始刻度。 最重要的是视图端口宽度，它定义了从网页的角度可用的水平像素总数（可用的CSS像素数）。
屏幕密度
WebView类和大多数Web浏览器将您的CSS像素值转换为与密度无关的像素值，因此您的网页以与中密度屏幕（约160dpi）相同的可感知大小显示。 然而，如果图形是您的网页设计的重要元素，则应该密切关注不同密度下的缩放，因为320dpi屏幕上的300像素宽的图像将被放大（使用每个CSS像素更多的物理像素） ，它可以产生人造物（模糊和像素化）
指定视口属性
视口是您的网页绘制的区域。 虽然视口的总可见区域与缩放后的屏幕大小匹配，但视口具有自己的像素尺寸，可用于网页。 例如，尽管设备屏幕的物理宽度可能为480像素，但视口的宽度可以为800像素。 当视口比例为1.0时，这允许设计为800像素宽的网页在屏幕上完全可见。 默认情况下，Android（包括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定位设备密度
Android浏览器和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定位设备密度
Android浏览器和WebView支持DOM属性，可以让您查询当前设备的密度，即window.devicePixelRatio DOM属性。此属性的值指定用于当前设备的缩放因子。例如，如果window.devicePixelRatio的值为“1.0”，则设备被认为是中密度设备，默认情况下不应用缩放;如果值为“1.5”，则设备被认为是高密度设备，默认情况下页面缩放为1.5x;如果值为“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");
}
Supporting Different Screens in Web Apps
以上内容为官方翻译，翻译不准确地方望指出：
