[翻译]Supporting Different Screens in Web Apps

原文： https://developer.android.com/guide/webapps/targeting.html

由于 Android 可用于多种屏幕尺寸与像素密度，在 web 设计时你应当考虑这些因素以便页面总是以适当的尺寸显示。

当你的 web 页面目标为 Android 设备时，有两个需要考虑的主要因素：

• 视口(viewport)
  视口是一个为 web 页面提供绘图区域的矩形。你可以指定数个视口属性，比如尺寸和初始缩放系数(initial scale)。最重要是视口宽度，它定义了网页水平方向的可用像素总数(可用的CSS像素数)。

• 屏幕密度(screen density)
  WebView 和大多数 Android 上的网页浏览器会将你的CSS像素值转换为密度无关像素值，因此你的网页与中密度屏幕(约160dpi)显示为相同感知的尺寸。
  但是，如果图像是你的网页设计的重要元素，你应该重视它们在不同密度屏幕上发生的缩放，因为 300px 宽的图像在 320dpi 屏幕上会被放大(每CSS像素使用更多的物理像素)并失真(模糊和像素化)。

设置视口属性

视口(viewport)是你的网页绘图的区域。
虽然视口的可见区域在缩放时总是适应屏幕尺寸，但视口有自己的像素尺寸供网页使用。
例如，即使一个设备物理宽度是 480px，它的视口宽度也能用 800px。
这使得为 800px 宽设计的网页在视口缩放系数为1的屏幕上完全可见。
大多数 Android 上的网页浏览器(包括 Chrome)设置默认视口为一个大尺寸(被称为"wide viewport mode"，宽约 980px)。
也有许多浏览器默认会尽可能缩放以显示完整的视口宽度(被称为"overview mode")。

注意：当你的页面在 WebView 中呈现，它默认会使用完全缩放(full zoom)而不是“wide viewport mode”，你可以使用setUseWideViewPort()启用“wide viewport mode”。

你可以通过在网页文档的中使用标签来为网页定义视口属性，比如 宽度(width)与初始缩放级别(initial zoom level)。

以下语法展示视口支持的各种属性与其值接受的类型：

例如，下面的标签指定视口宽度精确匹配设备屏幕宽度同时禁用了缩放：

当你为移动设备优化网站时，你应该设置宽度为"device-width"以便在所有设备上刚好合适，然后使用CSS媒体查询(media queries)来灵活地适配不同屏幕尺寸的布局。

注意：仅当你确定你的网页布局是足够灵活同时内容能适应小屏幕的宽度时你才可以禁用用户缩放。

使用CSS适配设备密度

Android 浏览器与 WebView 支持的CSS媒体查询特性-webkit-device-pixel-ratio让你能为指定的屏幕密度创建样式。你可以为这个特性取值 "0.75", "1", "1.5"，分别指定样式用于低(low)、中(medum)、高(high)密度屏幕的设备。

例如，你可以为各个密度分别创建样式表：

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

#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 Images for Variable Pixel Densities

使用JavaScript适配设备密度

Android 浏览器与 WebView 支持的DOM属性window.devicePixelRatio使你能查询当前设备的密度。
这个属性的值表示当前设备的缩放系数。

举个例子，
如果其值是"1.0"，那么设备将被识别为中密度(medium density)且默认没有缩放；
如果其值是"1.5"，那么设备将被识别为高密度(high density)且页面默认放大为1.5倍；
如果其值是"0.75"，那么设备将被识别为低密度(low density)且页面默认缩小为0.75倍；

当然，Android 浏览器与 WebView 的缩放是基于网页的目标密度。默认目标是中密度(medium density)，但是你可以修改目标以调整网页在不同屏幕密度的缩放。

举个例子，这里为你展示如何用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");
}