WebApp开发-Google官方教程

大家好，又见面了，我是你们的朋友全栈君。

概览

你可以使用viewport的元数据、CSS和Javascript来为不同分辨率的屏幕设置合适的页面
本文档中的技术适用于Android 2.0及以上设备，针对默认的Android Browser中及在WebView中呈现的页面

如果你在为Android开发Web应用或者在为移动设备重新设计一个Web应用，你需要仔细考虑在不同设备上你的页面看起来是怎样的。因为Android设备有不同款型，因此你需要考虑影响你的页面在Android设备上展示的一些因素。

注意： 该文档中考虑的特性只被Android 2.0 以及更高版本上的Android Browser application（由默认Android平台提供的）和WebView（用以展现web页面的框架工具集）支持。在Android上运行的第三方浏览器可能并不支持这些用来控制viewport和分辨率的特性。

当为Android设备设计页面时，有两个需要考虑的基本因素：

Viewport的大小以及web page的规模

当Android Browser加载一个页面的时候，默认是以”overview mode”加载，以提供一个放大的页面。你可以通过定义viewport的默认尺寸或者是viewport的初始规模来改写这一行为。你同样可以控制用户放大或缩小页面的程度。用户也可以在浏览器设置中屏蔽overview mode，这样的情况下你就不应该假设你的页面是以overview mode加载的。相反，你应该为你的页面定制合适的viewport大小和规模。

然而，当你的页面在WebView中展现的时候，页面是以最大化形式加载的（而不是”overview mode”）。也就是说，它是以页面默认大小展示的，而不是放大以后的页面（即使用户屏蔽了overview mode，页面也是如此展示）。

设备屏幕的分辨率

Android设备的屏幕分辨率会影响web页面展现的分辨率和展现大小。（有三种屏幕分辨率：低、中、高。）Android浏览器和WebView通过缩放页面来适应不同屏幕分辨率，这样所有的设备都是以默认大小即中分辨率的大小来展示web页面的。如果在你的web页面中，图像是很重要的一部分，那么你就需要密切关注在不同分辨率下发生的缩放，因为图像缩放可能会带来模糊以及像素化的问题。

为了在所有分辨率下都能提供最好的视觉效果，你需要通过提供你的页面的目标分辨率的viewport元数据来控制缩放，并通过使用CSS或者Javascript来为不同分辨率提供不同图像。

这篇文档剩下的部分讲述了你该如何考虑这些影响并为不同类型的屏幕提供一个好的设计。

使用Viewport 元数据

Viewport是指用以展现你的页面的区域。尽管viewport的可见区域和屏幕大小是匹配的，但是它有着自己的尺寸（dimensions），这一尺寸决定了页面上可见的像素点。也就是说，一个web页面在扩张到整个屏幕之前占用的像素数据是由viewport的尺寸（dimensions）来定义的，而不是设备屏幕的尺寸。例如，尽管一个设备的屏幕宽480像素，但是viewport宽800像素，那么这个web页面需要在800像素宽的屏幕上才能完全展现。

你可以在HTML中使用 <meta> tag（这个tag必须包含在文档的<head>中）来为你的页面定义viewport的性质。你可以在 <meta> tag的content 属性中，定义多个viewport性质。例如，你可以定义viewport的高和宽，页面的最初大小，以及目标屏幕分辨率。content 属性中的每个viewport性质必须以逗号相隔。

例如，下面的HTML片段指定了viewport宽度必须严格和屏幕宽度匹配，并禁用了放大功能：

<head>
<title>Example</title>
<meta name=”viewport” content=”width=device-width, user-scalable=no” />
</head>

这是个定义两个viewport性质的例子。下面的语法显示了所有受支持的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] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
” />

下面的部分讨论了如何使用这些viewport性质以及可以赋给这些性质的值到底是怎样。

定义viewport大小

Figure 1. 一个web页面，其中有320像素宽的图像，在Android Browser中呈现，没有设置viewport元数据（开启了”overview mode”，viewport默认为800像素宽）

Viewport的height 和 width性质让你可以指定viewport大小（即页面在扩张到屏幕之前可见的大小）。

跟上面提到的一样，Android Browser默认以”overview mode”加载页面（除非这一模式被用户禁用），将最小的viewport宽度定义为800像素。因此，如果你的web页面定义的宽度为320像素的话，那么你的页面看起来就比屏幕小（除非你的物理屏幕是320像素宽的，因为viewport模拟出了一个800像素宽的可绘图区域），就如figure 1中所示。为避免这一影响，你需要显式定义viewport的width与你设计的web页面的宽度匹配。

例如：如果你的web页面是设计为320像素宽的，那么你就需要为viewport的width指定相同大小如下：

<meta name=”viewport” content=”width=320″ />

在这个例子中，你的web页面和屏幕宽度大小刚好是匹配的，因此页面宽度和viewport的width是一致的。

注意： 大于10,000的width值将被忽略，小于或等于320的值将会使得width的值等于设备的宽度（下面将会讨论）。大于10,000或者小于200的height值将被忽略。

为了展现这个性质是如何影响页面大小的，figure 2展示了一个web页面，在这里，web页面中包含一个320像素宽的图像，但是viewport的width设置为400.

注意：如果你设置viewport的width与页面宽度匹配而设备屏幕大小和这些尺寸不匹配的话，web页面将仍然占满整个屏幕，即使设个设备屏幕是低分辨率或者高分辨率的，因为Android Browser和WebView 默认将web页面缩放到中等分辨率屏幕大小（如同你在figure 2中看到的一样，图中对比了高分辨率和中等分辨率设备）屏幕分辨率在Defining the viewport target density中有更多讨论。

自动缩放

Figure 2. 设置viewport width=400 ，开启 “overview mode” (页面中的图像为 320 像素宽).

除了将viewport尺寸定义为精确的数值以外，你还可以将其设置为永远和设备屏幕尺寸匹配，即将viewport的height和width分别赋值为device-height 和device-width。这在你开发一个有着活动大小的web应用的时候是非常合适的，这能使这个web应用的页面好像是固定的（和每个屏幕宽度都精确匹配）。例如：

<meta name=”viewport” content=”width=device-width” />

Figure 3. 设置 viewport width=device-width or initial-scale=1.0的web页面.

设置viewport尺寸永远和屏幕尺寸匹配结果如figure 3所示。需要注意的是，这样的设置会导致图片缩放到与屏幕匹配，即使当前设备和target density（默认情况下是中等分辨率）并不匹配。因此，figure 3中的高分辨率设备的图片在中等分辨率的设备上放大了，以便和屏幕宽度匹配。

注意：如果你希望device-width 和 device-height和设备的物理屏幕的像素匹配，而不是通过缩放web页面来和target density匹配，那么你就必须包含一个target-densitydpi性质并将其赋值为 device-dpi。这在Defining the viewport density中将会有更多讨论。否则，只使用device-width 和 device-height来定义viewport大小的话会让你的页面自动适应每个屏幕，但是你的图片也会缩放以便适应不容屏幕分辨率。

定义viewport规模

Viewport规模确定了页面的缩放程度。Viewport性质能让你以下面的方式指定页面缩放程度：

初始缩放（initial-scale）

即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。

默认的初始缩放值是通过计算让页面和viewport大小匹配。因为默认viewport宽度是800像素，如果设备屏幕分辨率宽度小于800，那么初始缩放值在默认情况下是小于1.0的，以便和屏幕上的800像素宽的页面匹配。

最小缩放（minimum-scale）

即允许的最小缩放程度。这是一个浮点值，用以指出页面大小与屏幕大小相比的最小乘数。例如，如果你将这个值设置为“1.0”，那么这个页面将不能缩小，因为最小值和 target density为1:1的关系。

最大缩放（maximum-scale）

即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

用户调整缩放（user-scalable）

即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

例如：

<meta name=”viewport” content=”initial-scale=1.0″ />

这个元数据将初始缩放值定义为和viewport的target density相比为满屏。

定义viewport的target density

一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

因为默认target density是中像素密度，因此当用户拥有一个低像素或者高像素密度的屏幕时，Android Browser和 WebView会缩放页面，以便它们能在中等像素密度的屏幕以合适的大小展示。更具体来说，Android Browser和 WebView会在高像素密度设备上将页面放大约1.5倍（因为高像素密度设备上的像素点更小），而在低像素密度设备上将页面缩小为约0.75倍（因为低像素密度设备上的像素点更大）。

由于默认缩放，figure 1,2,3展现了同样物理大小的web页面在高像素密度设备和中等像素密度设备上的效果（高像素密度设备上的web页面放大到实际的1.5倍，以便和target density匹配）。这会给图像带来一些问题。比如，尽管一个图像在中等像素密度和高像素密度设备上看起来大小一样，但是高像素密度设备上的图像看起来更为模糊，因为这个图像本来是为320像素宽而设计的，但却被拉到了480像素宽。

Figure 4. 设置 viewport width=device-width ， target-densitydpi=device-dpi的web页面.

你可以通过使用viewport的target-densitydpi性质来改变目标屏幕像素密度。可以赋给它的值如下所列：

device-dpi –使用设备原本的 dpi 作为目标 dp。不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。中等像素密度和低像素密度设备相应缩小。.
medium-dpi – 使用mdpi作为目标 dpi。高像素密度设备相应放大，像素密度设备相应缩小。这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

例如，为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。例如：

<meta name=”viewport” content=”target-densitydpi=device-dpi, width=device-width” />

Figure 4 展示了使用这些设置的一个web页面——在高像素密度设备上，这个页面看起来小一些了，因为它的物理像素点比中等像素密度设备上的像素点要小，而又没有缩放发生，因此320像素宽的图像在两个界面上都只占用了320像素宽。（如果你想要根据屏幕像素密度来定制你的web页面的话，你就应该如此定义viewport，并使用CSS 或者 JavaScript来为不同像素密度设备提供不同图像。）

针对不同像素密度应用CSS

Android Browser和WebView支持一个CSS的media特性，让你能为特定像素密度的设备来创建styles——这个media特性就是 -webkit-device-pixel-ratio CSS media feature。你赋给这个特性的值应该是”0.75″, “1″, 或 “1.5″，来分别指出styles是针对低像素密度、中等像素密度和高像素密度的。

例如：你可以为不容像素密度创建样式列表stylesheets如下：

<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” />
<link rel=”stylesheet” media=”screen and (-webkit-device-pixel-ratio: 0.75)” href=”ldpi.css” />

Figure 5. 使用CSS中的 -webkit-device-pixel-ratio 来为不同分辨率的屏幕指定不同web页面。注意在hdpi设备中使用的是一幅不同的图片。

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

#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);
}
}

注意：#header默认的style是将图片应用于中等像素密度的设备，以支持Android2.0以下的设备，这些设备是不支持-webkit-device-pixel-ratio的。

根据你设置的viewport性质不同，你要调整的对不同像素密度的styles的风格也应该不同。为了让你的页面能在不同像素密度下都有合适的styles，你需要将viewport的宽度设置为与设备匹配。即：

<meta name=”viewport” content=”target-densitydpi=device-dpi, width=device-width” />

通过这种方式，Android Browser和 WebView就不会对你的页面进行缩放，并且viewport的width能与设备的width精确匹配。这一设置效果如figure 4所示。然而，通过使用-webkit-device-pixel-ratio ，你可以应用不同的styles。例如，在figure 5中，展示了一个使用如上viewport设置并使用了一些CSS的页面，在这个CSS中，定义将高分辨率的图像用于高像素密度的屏幕。

针对不同像素密度应用 JavaScript

Android Browser和 WebView支持一个文档对象模型（DOM）特性，可以让你查询当前设备的像素密度——即DOM的window.devicePixelRatio 特性。这个特性的值指定了当前设备的缩放因子。例如，如果window.devicePixelRatio的值是“1.0”，则这个设备是一个中等像素密度的设备，默认不缩放；如果window.devicePixelRatio的值是“1.5”，则这个设备是一个高像素密度的设备，默认以1.5倍缩放；如果window.devicePixelRatio的值是“0.75”，则这个设备是一个低像素密度的设备，默认以0.75倍缩放。当然，Android Browser 和WebView 是根据页面的target density进行缩放的，和上文讨论的一样，其默认target是中等像素密度，但是你可以修改这个target，调整你的页面在不同屏幕分辨率下的缩放方式。

例如：你可以像下面这样通过Javascript来查询设备像素密度：