Android Web App官方文档翻译第二章:屏幕适配
概览你可以使用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&rdquo
补充：移动开发 , Android ,
