支持不同屏幕的Web Apps

由于Android可用于具有各种屏幕尺寸和像素密度的设备，因此您应该在网页设计中考虑到这些因素，以便您的网页始终以适当的大小显示。

当您定位到Android设备的网页时，您应该考虑以下两个主要因素：
视口
视口是为您的网页提供可绘制区域的矩形区域。您可以指定多个视口属性，例如其大小和初始刻度。最重要的是视图端口宽度，它定义了从网页的角度可用的水平像素总数（可用的CSS像素数）。
屏幕密度
WebView类和大多数Web浏览器将您的CSS像素值转换为与密度无关的像素值，因此您的网页以与中密度屏幕（约160dpi）相同的可感知大小显示。然而，如果图形是您的网页设计的重要元素，则应该密切关注不同密度下的缩放，因为320dpi屏幕上的300像素宽的图像将被放大（使用每个CSS像素更多的物理像素），它可以产生人造物（模糊和像素化）

指定视口属性

视口是您的网页绘制的区域。虽然视口的总可见区域与缩放后的屏幕大小匹配，但视口具有自己的像素尺寸，可用于网页。例如，尽管设备屏幕的物理宽度可能为480像素，但视口的宽度可以为800像素。当视口比例为1.0时，这允许设计为800像素宽的网页在屏幕上完全可见。默认情况下，Android（包括Chrome）上的大多数网络浏览器都将视口设置为较大的尺寸（称为“宽视口模式”，大约为980px宽）。许多浏览器也尽可能缩小，默认情况下显示完整的视口宽度（称为“概览模式”）。
注意：当您的页面在WebView中呈现时，默认情况下不会使用宽视口模式（页面以完全缩放显示）。您可以使用setUseWideViewPort（）启用宽视口模式。
您可以使用文档中的标签来定义网页视口的属性，例如宽度和初始缩放级别。
以下语法显示所有支持的视口属性和每个受支持的值的类型：

例如，以下标记指定视口宽度应与设备屏幕宽度完全相符，并且应禁用缩放功能：

    Example

当优化您的移动设备的站点时，通常应将宽度设置为“设备宽度”，以使尺寸完全符合所有设备，然后使用CSS媒体查询来灵活地调整布局以适应不同的屏幕尺寸。

注意：只有当您确定您的网页布局是灵活的并且内容适合小屏幕的宽度时，才应禁用用户缩放。

使用CSS定位设备密度

Android浏览器和WebView支持CSS媒体功能，允许您为特定的屏幕密度创建样式 - -webkit-device-pixel-ratio CSS媒体功能。您应用于此功能的值应为“0.75”，“1”或“1.5”，以表示样式分别用于具有低密度，中密度或高密度屏幕的设备。
例如，您可以为每个密度创建单独的样式表：

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

#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
以上内容为官方翻译，翻译不准确地方望指出：

Android中的网络应用之网页设置，检测、配置用户设备属性。

支持不同屏幕的Web Apps

指定视口属性

使用CSS定位设备密度

更多相关文章

随机推荐