原始文章:https://developer.android.com/guide/webapps/targeting.html
由于Android适用于各种屏幕尺寸和像素密度的设备,所以您应该在web设计中考虑这些因素,以便您的web页面总是以适当的大小出现。
当针对Android设备的web页面时,有两个主要因素需要考虑:
The viewport
viewport是为您的web页面提供可绘制区域的矩形区域。您可以指定几个viewport属性,比如它的大小和初始规模。最重要的是视图端口宽度,它定义了从web页面的角度(可用的CSS像素数量)可用的水平像素的总数。
The screen density
在Android上,WebView类和大多数web浏览器将CSS像素值转换为density - independent像素值,因此您的web页面与中等密度屏幕(大约160dpi)的大小相同。然而,如果图形是你的网页设计的一个重要元素,你应该密切关注在不同密度上发生的缩放,因为在320dpi屏幕上有一个300px宽的图像会被放大(使用更多的物理像素/ CSS像素),这可以产生工件(模糊和像素化)。
指定窗口的属性
viewport是您的web页面绘制的区域。尽管viewport的总可见区域与屏幕的大小相匹配,但当它放大的时候,viewport有它自己的像素尺寸,它可以提供给web页面。例如,尽管一个设备屏幕可能具有480像素的物理宽度,但viewport的宽度可以达到800像素。这样,当viewport scale为1.0时,在屏幕上可以完全看到800像素宽的网页。大多数基于Android(包括Chrome)的web浏览器默认设置了一个大尺寸的viewport(被称为“宽视角模式”,大约为980px宽)。许多浏览器在默认情况下也尽可能缩小,以显示完整的viewport宽度(称为“overview模式”)。
注意:当您的页面在WebView中呈现时,默认情况下,它不会使用宽视图模式(页面出现在完全缩放下)。您可以使用setUseWideViewPort()启用宽视图模式。
您可以使用< meta name=”viewport “>来定义web页面的viewport的属性,例如宽度和初始缩放级别。在您的文档< head >中添加标记。
下面的语法显示了所有受支持的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 >标记指定了viewport宽度应该与设备屏幕的宽度完全匹配,并且缩放的能力应该被禁用:
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
当优化你的移动设备网站时,你通常应该设置宽度为“device-width”,这样尺寸正好适合所有设备,然后使用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属性可以查询当前设备的密度——devicePixelRatio DOM属性。此属性的值指定当前设备使用的比例因子。例如,如果窗口的值。devicePixelRatio为“1.0”,该设备被认为是中密度设备,默认情况下不应用缩放;如果值为“1.5”,则该设备被认为是高密度的设备,默认情况下该页面被缩放1.5倍;如果值为“0.75”,则该设备被认为是低密度设备,默认情况下,该页面将按0.75 x的比例缩放。当然,Android浏览器的扩展和WebView应用是基于网页的目标中描述密度与部分有关目标密度定义窗口,默认的目标是中密度,但你可以改变目标如何影响您的web页面是不同的屏幕密度的比例。
例如,下面是如何使用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");
}