概览

  • 你可以使用viewport的元数据、CSS和Javascript来为不同分辩率的屏幕设置合适的页面
  • 本文档中的技术适用于Android2.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中使用tag（这个tag必须包括在文档的中）来为你的页面定义viewport的性质。你可以在tag的content属性中，定义多个viewport性质。例如，你可以定义viewport的高和宽，页面的最初大小，以及目标屏幕分辩率。content属性中的每个viewport性质必须以逗号相隔。

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

        
                
  1. <head>
    2.             
  2. <title>Exampletitle>
    3.             
  3. <metaname=”viewport”content=”width=device-width,user-scalable=no”/>
    4.             
  4. head>
    5.

　　这是个定义两个viewport性质的例子。下面的语法显示了全部受支持的viewport性质及各个性质接受的数据基本属性：

        
                
  1. <metaname="viewport"
    2.             
  2. content="
    3.             
  3. height=[pixel_value|device-height],
    4.             
  4. width=[pixel_value|device-width],
    5.             
  5. initial-scale=float_value,
    6.             
  6. minimum-scale=float_value,
    7.             
  7. maximum-scale=float_value,
    8.             
  8. user-scalable=[yes|no],
    9.             
  9. target-densitydpi=[dpi_value|device-dpi|
    10.             
  10. high-dpi|medium-dpi|low-dpi]
    11.             
  11. "/>
    12.

　　下面的部分讨论了如何使用这些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指定相同大小如下：

        
                
  1. <metaname="viewport"content="width=320"/>
    2.

　　在这个例子中，你的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中看到的一样，图中对照了高分辩率和中等分辩率设备）屏幕分辩率在Definingtheviewport target density中有更多讨论。

自动缩放

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

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

        
                
  1. <metaname="viewport"content="width=device-width"/>
    2.

　　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的范围之内。

　　例如：

        
                
  1. <metaname="viewport"content="initial-scale=1.0"/>
    2.

　　这个元数据将初始缩放值定义为和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。中等像素密度和高像素密度设备相应放大。
  • - 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

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

        
                
  1. <metaname="viewport"content="target-densitydpi=device-dpi,width=device-width"/>
    2.

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

针对不同像素密度应用CSS

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

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

        
                
  1. <linkrel="stylesheet"media="screenand(-webkit-device-pixel-ratio:1.5)"href="hdpi.css"/>
    2.             
  2. <linkrel="stylesheet"media="screenand(-webkit-device-pixel-ratio:1.0)"href="mdpi.css"/>
    3.             
  3. <linkrel="stylesheet"media="screenand(-webkit-device-pixel-ratio:0.75)"href="ldpi.css"/>
    4.

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

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

        
                
  1. #header{
    2.             
  2.             
  3. background:url(medium-density-image.png);
    4.             
  4.             
  5. }
    6.             
  6.             
  7. @mediascreenand(-webkit-device-pixel-ratio:1.5){
    8.             
  8.             
  9. /*CSSforhigh-densityscreens*/
    10.             
  10.             
  11. #header{
    12.             
  12.             
  13. background:url(high-density-image.png);
    14.             
  14.             
  15. }
    16.             
  16.             
  17. }
    18.             
  18.             
  19. @mediascreenand(-webkit-device-pixel-ratio:0.75){
    20.             
  20.             
  21. /*CSSforlow-densityscreens*/
    22.             
  22.             
  23. #header{
    24.             
  24.             
  25. background:url(low-density-image.png);
    26.             
  26.             
  27. }
    28.             
  28.             
  29. }
    30.

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

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

        
                
  1. <metaname="viewport"content="target-densitydpi=device-dpi,width=device-width"/>
    2.

　　通过这种方式，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来查询设备像素密度：

        
                
  1. if(window.devicePixelRatio==1.5)
    2.             
  2. {
    3.             
  3. alert("Thisisahigh-densityscreen");}
    4.             
  4. elseif(window.devicePixelRatio==0.75)
    5.             
  5. {
    6.             
  6. alert("Thisisalow-densityscreen");
    7.             
  7. }
    8.

更多相关文章

  1. 一款APP设计的从0到1之：Android设计规范篇
  2. Android视频技术 分辨率与屏幕大小优化
  3. android 跳转到横屏activity出现之前activity周期重新加载的问题
  4. Android中使用webview加载网页上的按钮点击失效
  5. android 基础概述
  6. Android(安卓)layout adaptive to mutiply density screen
  7. 关于android分辨率兼容问题（一）
  8. Android分享笔记(6) Android(安卓)自定义UI模板
  9. 谈谈Android的一些UI设计

随机推荐

  1. Android(安卓)requires compiler complia
  2. Android 添加菜单和返回按钮
  3. Android Studio使用技巧
  4. Android Weekly #216 中文版
  5. Android(安卓)横向RecyclerView中item居
  6. android改变分区权限
  7. Android使用SharedPreferences实现登录帐
  8. DeskClock笔记
  9. Android自用----- 加载png图片时出错！
  10. android studio继续深入ndk打包so库和jar