Android Web App官方文档翻译第二章屏幕适配Word格式文档下载.docx

1、Android设备的屏幕分辨率会影响web页面展现的分辨率和展现大小。（有三种屏幕分辨率：低、中、高。）Android浏览器和WebView通过缩放页面来适应不同屏幕分辨率，这样所有的设备都是以默认大小即中分辨率的大小来展示web页面的。如果在你的web页面中，图像是很重要的一部分，那么你就需要密切关注在不同分辨率下发生的缩放，因为图像缩放可能会带来模糊以及像素化的问题。为了在所有分辨率下都能提供最好的视觉效果，你需要通过提供你的页面的目标分辨率的viewport元数据来控制缩放，并通过使用CSS或者Javascript来为不同分辨率提供不同图像。这篇文档剩下的部分讲述了你该如何考虑这些影响并

2、为不同类型的屏幕提供一个好的设计。使用Viewport 元数据Viewport是指用以展现你的页面的区域。尽管viewport的可见区域和屏幕大小是匹配的，但是它有着自己的尺寸（dimensions），这一尺寸决定了页面上可见的像素点。也就是说，一个web页面在扩张到整个屏幕之前占用的像素数据是由viewport的尺寸（dimensions）来定义的，而不是设备屏幕的尺寸。例如，尽管一个设备的屏幕宽480像素，但是viewport宽800像素，那么这个web页面需要在800像素宽的屏幕上才能完全展现。你可以在HTML中使用 tag（这个tag必须包含在文档的中）来为你的页面定义viewport

3、的性质。你可以在 tag的content 属性中，定义多个viewport性质。例如，你可以定义viewport的高和宽，页面的最初大小，以及目标屏幕分辨率。content 属性中的每个viewport性质必须以逗号相隔。例如，下面的HTML片段指定了viewport宽度必须严格和屏幕宽度匹配，并禁用了放大功能：Examplemeta name=”viewport” content=”width=device-width, user-scalable=no” /head这是个定义两个viewport性质的例子。下面的语法显示了所有受支持的viewport性质及各个性质接受的数据基本属性：met

4、a 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 /下面的部

5、分讨论了如何使用这些viewport性质以及可以赋给这些性质的值到底是怎样。定义viewport大小 Figure 1. 一个web页面，其中有320像素宽的图像，在Android Browser中呈现，没有设置viewport元数据（开启了overview mode，viewport默认为800像素宽）Viewport的height 和 width性质让你可以指定viewport大小（即页面在扩张到屏幕之前可见的大小）。跟上面提到的一样，Android Browser默认以”overview mode”加载页面（除非这一模式被用户禁用），将最小的viewport宽度定义为800像素。因此，如

6、果你的web页面定义的宽度为320像素的话，那么你的页面看起来就比屏幕小（除非你的物理屏幕是320像素宽的，因为viewport模拟出了一个800像素宽的可绘图区域），就如figure 1中所示。为避免这一影响，你需要显式定义viewport的width与你设计的web页面的宽度匹配。例如：如果你的web页面是设计为320像素宽的，那么你就需要为viewport的width指定相同大小如下：width=320在这个例子中，你的web页面和屏幕宽度大小刚好是匹配的，因此页面宽度和viewport的width是一致的。 大于10,000的width值将被忽略，小于或等于320的值将会使得width

7、的值等于设备的宽度（下面将会讨论）。大于10,000或者小于200的height值将被忽略。为了展现这个性质是如何影响页面大小的，figure 2展示了一个web页面，在这里，web页面中包含一个320像素宽的图像，但是viewport的width设置为400.如果你设置viewport的width与页面宽度匹配而设备屏幕大小和这些尺寸不匹配的话，web页面将仍然占满整个屏幕，即使设个设备屏幕是低分辨率或者高分辨率的，因为Android Browser和WebView 默认将web页面缩放到中等分辨率屏幕大小（如同你在figure 2中看到的一样，图中对比了高分辨率和中等分辨率设备）屏幕分辨率

8、在Defining the viewport target density中有更多讨论。自动缩放Figure 2. 设置viewport width=400 ，开启 （页面中的图像为 320 像素宽）.除了将viewport尺寸定义为精确的数值以外，你还可以将其设置为永远和设备屏幕尺寸匹配，即将viewport的height和width分别赋值为device-height 和device-width。这在你开发一个有着活动大小的web应用的时候是非常合适的，这能使这个web应用的页面好像是固定的（和每个屏幕宽度都精确匹配）。width=device-widthFigure 3. 设置 view

9、port width=device-width or initial-scale=1.0的web页面.设置viewport尺寸永远和屏幕尺寸匹配结果如figure 3所示。需要注意的是，这样的设置会导致图片缩放到与屏幕匹配，即使当前设备和target density（默认情况下是中等分辨率）并不匹配。因此，figure 3中的高分辨率设备的图片在中等分辨率的设备上放大了，以便和屏幕宽度匹配。如果你希望device-width 和 device-height和设备的物理屏幕的像素匹配，而不是通过缩放web页面来和target density匹配，那么你就必须包含一个target-densityd

10、pi性质并将其赋值为 device-dpi。这在Defining the viewport density中将会有更多讨论。否则，只使用device-width 和 device-height来定义viewport大小的话会让你的页面自动适应每个屏幕，但是你的图片也会缩放以便适应不容屏幕分辨率。定义viewport规模Viewport规模确定了页面的缩放程度。Viewport性质能让你以下面的方式指定页面缩放程度：初始缩放（initial-scale）即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target

11、density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。默认的初始缩放值是通过计算让页面和viewport大小匹配。因为默认viewport宽度是800像素，如果设备屏幕分辨率宽度小于800，那么初始缩放值在默认情况下是小于1.0的，以便和屏幕上的800像素宽的页面匹配。最小缩放（minimum-scale）即允许的最小缩放程度。这是一个浮点值，用以指出页面大小与屏幕大小相比的最小乘数。例如，如果你将这个值设置为“1.0”，那么这个页面将不能缩小，因为最小值和 target density为1:1的关系。最大缩放（maximum-scale）即允许的最大缩放程度

12、。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。用户调整缩放（user-scalable）即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。所有的缩放值都必须在0.0110的范围之内。initial-scale=1.0这个元数据将初始缩放值定义为和viewport的target density相比为满屏。定义viewpor

13、t的target density一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。因为默认target density是中像素密度，因此当用户拥有一个低像素或者高像素密度的屏幕时，Android Browser和 WebView会缩放页面，以便它们能在中等像素密度的屏幕以合适的大小展示。更具体来说，Android Browser和 WebView会

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

15、rt 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

16、。中等像素密度和高像素密度设备相应放大。value - 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70400之间。例如，为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。target-densitydpi=device-dpi, width=d

17、evice-widthFigure 4 展示了使用这些设置的一个web页面在高像素密度设备上，这个页面看起来小一些了，因为它的物理像素点比中等像素密度设备上的像素点要小，而又没有缩放发生，因此320像素宽的图像在两个界面上都只占用了320像素宽。（如果你想要根据屏幕像素密度来定制你的web页面的话，你就应该如此定义viewport，并使用CSS 或者 JavaScript来为不同像素密度设备提供不同图像。）针对不同像素密度应用CSS Android Browser和WebView支持一个CSS的media特性，让你能为特定像素密度的设备来创建styles这个media特性就是 -webkit-

18、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 1.0）mdpi.css 0.75）ldpi.cssFigure 5. 使用CSS中的 -webkit-device-pixel-ratio 来为不同分辨率的屏幕指定不

19、同web页面。注意在hdpi设备中使用的是一幅不同的图片。或者，在一个样式表中指定不同的styles：#header background:url（medium-density-image.png）;media screen and （-webkit-device-pixel-ratio: 1.5） /* CSS for high-density screens */url（high-density-image.png）; 0.75） /* CSS for low-density screens */url（low-density-image.png）;#header默认的style是将图片应

20、用于中等像素密度的设备，以支持Android2.0以下的设备，这些设备是不支持-webkit-device-pixel-ratio的。根据你设置的viewport性质不同，你要调整的对不同像素密度的styles的风格也应该不同。为了让你的页面能在不同像素密度下都有合适的styles，你需要将viewport的宽度设置为与设备匹配。即：通过这种方式，Android Browser和 WebView就不会对你的页面进行缩放，并且viewport的width能与设备的width精确匹配。这一设置效果如figure 4所示。然而，通过使用-webkit-device-pixel-ratio ，你可以应

21、用不同的styles。例如，在figure 5中，展示了一个使用如上viewport设置并使用了一些CSS的页面，在这个CSS中，定义将高分辨率的图像用于高像素密度的屏幕。针对不同像素密度应用 JavaScriptAndroid Browser和 WebView支持一个文档对象模型（DOM）特性，可以让你查询当前设备的像素密度即DOM的window.devicePixelRatio 特性。这个特性的值指定了当前设备的缩放因子。例如，如果window.devicePixelRatio的值是“1.0”，则这个设备是一个中等像素密度的设备，默认不缩放；如果window.devicePixelRati

22、o的值是“1.5”，则这个设备是一个高像素密度的设备，默认以1.5倍缩放；如果window.devicePixelRatio的值是“0.75”，则这个设备是一个低像素密度的设备，默认以0.75倍缩放。当然，Android Browser 和WebView 是根据页面的target density进行缩放的，和上文讨论的一样，其默认target是中等像素密度，但是你可以修改这个target，调整你的页面在不同屏幕分辨率下的缩放方式。你可以像下面这样通过Javascript来查询设备像素密度：if （window.devicePixelRatio = 1.5） alert（This is a high-density screen）; else if （window.devicePixelRatio = 0.75）This is a low-density screen