标签：android开发 web app webview webapp适配
如果你在Android设备上设计开发一款web应用，你就应该考虑web页面在不同屏幕上的显示问题。因为Android有很多不同类型的手机屏幕，所以你应该去考虑那些影响web页面在Android设备上显示的因素。
注意：本文中描述的以下特性，已经在Android 2.0或更高的版本中的Android浏览器（Android系统默认的）和WebView（Android中用于显示网页的控件）上得到支持。第三方的浏览器可能不支持这些的属性。（也就是说只做了解）
针对web页面适配Android设备，你应该考虑这两个基本的因素：
窗口大小和web页面的缩放问题
当Android浏览器加载页面时，默认的是采用的“概览模式”，它提供一个web页面的缩放视角。你可以通过设定窗口的默认大小（或初始化大小）去改变浏览器的默认模式。你 也能控制用户缩放web页面的比例。用户也能在浏览器设置中去禁用Android浏览器的“概览模式”，所以不要以为web页面会一直在“概览模式“下加载。所以你应该去自定义窗口的大小及页面的缩放比例来替代它。
然而，页面在WebView控件加载时，是加载的原网页大小（不是”在概览模式“下加载的）。因此，它显示的是网页默认的大小，而不是缩放之后的页面。（这也是在用户禁用”概览模式“后，怎样去显示web页面的问题）。
设备的屏幕密度
Android设备商的密度（每英寸的像素数量）决定页面显示的大小。（屏幕密度分类：低，中，高）。Android浏览器和WebView可以通过缩放来弥补不同手机屏幕的像素密度的差异，以至于所有页面在所有的设备上看起来是一样的。如果图片在你的web设计中是重要的组成元素，你就应该特别的注意web在不同的设备上的缩放。因为图片有可能会失真。
为了在不同设备上达到最好的视觉效果，你应该控制缩放的比例，通过提供不同展示web页面的屏幕密度的元数据和针对不同屏幕密度的不同分辨率的图片，使其适用于使用CSS或JavaScript不同的屏幕。
本文的剩余本分描述的是如何解释这些影响并在不同的设备上提供一种好的设计。
Using Viewport Metadata
窗口是指的页面显示的区域范围。尽管窗口的显示区域是匹配屏幕大小的，但是窗口也是有自己的尺寸的，它的尺寸取决于显示页面的像素的数量。因此，当页面的原大小是超过屏幕大小的时候，页面的像素数量是通过窗口的尺寸来定义的，而不是设备屏幕大小来决定的。例如，有一个手机屏幕的宽度是480像素，而窗口的宽度为800像素的尺寸，所以页面设计成800像素就可完全在屏幕上完整显示。
（自己理解：这里可以简单的理解为，显示页面的窗口控件的大小是通过屏幕大小来决定大小的，而窗口有自己能显示最大页面像素的大小，比如在这个窗口里能显示一个800像素的页面，那页面设计成800像素，就完整显示了，这个窗口你可以理解为和图片似得，图片外表大小看着一样，但是他们的像素可能不一样，就这个意思）。
你可以通过在html页面的<meta>标签（必须是放置在<head>标签里）中定义窗口的属性。你可以在<meta>中通过content属性字段定义窗口的多个属性。例如你能定义窗口的高度和宽度，页面的缩放初始比例和目标屏幕的分辨率。在content属性字段中每个窗口属性值必须用逗号分开。
例如下面一段来自html里面的代码，它设定窗口大小完全匹配设备屏幕的宽度，并把缩放功能禁用掉了。
<head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head>
下面是两个窗口属性的实例演示，下列显示的是窗口支持的全部属性，并给出了每个属性所对应的所有的属性值：
<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] " />
下面的部分是讨论怎样去使用每一个属性，及每个属性值的作用是什么。
Defining the viewport size（设定窗口大小）
视图的height和width 的属性允许你去指定窗口的大小（在显示到屏幕上之前，设定显示页面的像素数量）。
上面文档上提到的Android浏览器加载页面是默认使用的“概览模式”（除非用户禁用），这种模式的设置的窗口的最小值是800像素。所以如果你的页面如果设定的页面大小是320个像素时，那么它在屏幕上显示时看起来是比较小的，（即使屏幕的物理窗口是 320像素时也会这样，因为显示页面的窗口它模拟范围是到800个像素宽度），就像图一。
所以为了避免这种情况，你该明确指定你的窗口大小和你所设计的网页大小完全匹配。
例如你的页面设计成320个像素宽，那么你的窗口也要设计成宽度为320像素。
<meta name="viewport" content="width=320" />
这样设置之后，你的页面就正好适配你的屏幕的宽度了，因为你的页面和窗口的像素是一样的。
注意：如果宽度的值大于10000的则会被忽略，而宽度比320小或等于320的则会被设置成设备的宽度(下面讨论).高度的值大于10000或小雨200的都将会呗忽略。
下面展示这属性怎样影响页面的大小，图二中显示一个包含一张320小苏宽度的图片的web页面，但是窗口设置的是400像素宽度
注意：如果你设置窗口的宽度与你的web页面的宽度匹配，设备的屏幕的宽度不匹配这些，这些页面仍然会适合这些屏幕，即使这些设备的屏幕的分辨率有高或有低的。
因为Android浏览器和webview会默认的把页面缩放成它们认为适合当前屏幕（图中是中等密度的屏幕）的大小。（真如你看到的图二中，hdip设备以mdip的设备的对比）。
屏幕密度将在Defining the viewport target density.中讨论的更多。
Automatic sizing
你可以用下面这种方法去替代设置窗口尺寸像素这种方法。你可以通过把窗口的height和width属性的值设置成device-height 和 device-width，来使窗口去适配设备屏幕的大小。当你开发的webapp的宽度是变化的（不是固定的），使用这种方法是合适的，除了宽度是固定的显示以外（把页面的宽度设置成适配每一个屏幕大小的）。
例如：
<meta name="viewport" content="width=device-width" />
这样做的结果是，无论你当前的屏幕是什么，窗口都会去匹配这些屏幕，如图3中显示的一样。去注意这一点是非常重要的，当当前的设备（如果你不指定就拿图中的中密度设备为例子）不匹配目标密度的时候，图片会自动缩放去匹配设备屏幕。如图三中，在高密度设备上的显示的图片，为了去适配中密度的设备，图片被按比例放大了。
注意：如果你想用device-width 和device-height去适配每个设备的密度，而不是去缩放web页面，你必须还要使用target-densitydpi这个属性和他的device-dpi这个值。这将在Defining the viewport density.中进行更多的讨论。
Defining the viewport scale
窗口的比例规定了web页面的缩放，下面的窗口属性允许你去设定页面的比例：
initial-scale
页面的最初比例。这个web页面相对于你屏幕大小放大的倍数是一个float值。例如，你设置initial-scale的值为“1.0”，则web页面就是按照你目标密度的1比1的比例来做适配显示，如果设置成2.0，这个页面就会扩大两倍。
默认的初始比例是计算出适配窗口的页面的大小。因为默认的窗口的宽度是800像素，如果屏幕的分辨率低于800像素宽度，怎这个初始化比例大约比1.0 要小。默认的是为了800像素在屏幕上适配。
minimum-scale
允许的最小比例。相对于当前屏幕大小的最小缩放倍数，是一个float。例如，你设置成“1.0”，则web页面就不能缩小，因为他的最小的比例就是1比1.
maximum-scale
允许的最大比例。相对于当前屏幕大小的最大缩放倍数，是一个float。例如，如果你设置成“2.0”，你就不能比2倍再大了。
user-scalable
用户能随意的放大或缩小页面。设置成“yes”允许，“no”禁止。默认的是“yes”。如果你设置成“no”，minimum-scale 和 maximum-scale将是被忽略的，因为他们不可用了。
所有的比例的范围是0.01–10。
实例：
<meta name="viewport" content="initial-scale=1.0" />
这个数据是表示设置的比例是相对于目标像素的全尺寸。
Defining the viewport target density（设置窗口密度）
设备的密度是基于设备屏幕的分辨率，其定义是每英寸的像素点数(dpi)。android 中支持三种不同的屏幕密度的类型：low (ldpi), medium (mdpi),和 high (hdpi)。低密度屏幕是每英寸有较少的像素点，而高密度屏幕有较多的像素点（相对于中密度屏幕比较）。Android浏览器和webview的默认磨边像素是中等像素。
因为默认的目标像素是中等像素，所以当用户有一个高像素或低像素的手机设备时，Android浏览器和WebView会缩放页面，以至于他们的显示大小匹配中等像素屏幕，使其显示效果和中等屏幕上一样。更准确的说，Android浏览器和WebView在高像素设备上大约是扩大1.5倍（因为他的屏幕像素更小），在低像素上大约是原来的0.75倍（因为他的屏幕像素更大）。
由于默认的缩放，图一图二和图三显示的实例，web页面在物理尺寸相同的高像素和中像素设备上显示，高像素的设备显示页面的的默认比例因子是实际像素的的1.5倍。这就可能会使图片的显示造成一些问题。例如，尽管在高密度设备和中密度设备上图片显示的大小是一样的，但是图片在高像素设备上显示是更模糊的，因为图片是只有320个像素宽度，但是他被画的像素宽度是480个像素。
在你的web页面中通过使用target-densitydpi这个窗口属性你可以改变目标屏幕的密度。他的属性值有下面几个：
device-dpi 用设备自己的dpi作为目标像素，默认不会发生缩放。
high-dpi 使用hdpi来作为目标像素。中像素和低像素的屏幕都缩小为适当的大小。
medium-dpi 用mdpi作为目标像素。高像素屏幕放大，低像素屏幕缩小。这是默认的目标像素。
low-dpi 用ldpi作为目标像素。高像素屏幕和中像素屏幕都放大到适当的大小。
<value> 指定像素值作为目标像素。值的范围是在70-400。
例如，为了防止Android浏览器和webView去根据不同的屏幕去缩放的web页面，把target-densitydpi的值设置为device-dpi。如果你这样做了，则页面就不缩放了。相反的，当前页面的显示是根据当前屏幕密度来匹配的。因此，你应该设计你的窗口宽度去匹配你的设备宽度，这样你的web页面自然而然的就适配了你的屏幕。
例如：
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
图四中显示的web页面就用了这些窗口属性。在高密度设备上显示的比较小。因为他的实际像素相比于中密度设备来说是比较少的，因此没有扩展发生。在这两个设备上这个320个像素宽度的照片都是使用的320个像素绘画的。（这就是怎样去定义你的窗口的方法，当你是根据你屏幕密度和提供不同像素密度的图片资源去定义你的带有js和css的web页面时）。
Targeting Device Density with CSS（真对设备密度使用css）
Android浏览器和WebView支持CSS的功能，即-webkit-device-pixel-ratio css media这个属性，允许对特定的屏幕创建特定的css风格，他的属性值是“0.75”，“1.0”和“1.5”用来分别表示低密度，中密度和高密度的css风格。
例如，你能针对不同的密度创建不同的样式表：
<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" />
或在同一个样式表中指定不同的样式风格：
#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的默认样式是为了支持在2.0一下版本正常运行，因为它们不支持-webkit-device-pixel-ratio media这个特性。
根据屏幕的密度你可以通过去设定窗口的属性去调整样式的种类。为了能对所支持的不同密度去对你的网页提供完全个性化的样式，你应该去设置窗口的属性以至于窗口宽度和密度匹配设备。正如下面：
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
这样设置，Android浏览器和webView不能缩放页面并且窗口的宽度正好匹配屏幕宽度。这些窗口属性的所得到效果如图四所示。然而通过用-webkit-device-pixel-ratiomedia属性添加一些自定义css，你就能够应用不同的样式。例如，图5中所展示的web页面，是通过设置窗口属性和添加css，是在高像素设备上调用了高像素的图片。
Targeting Device Density with JavaScript
Android浏览和webView支持一个可以允许查询当前设备密度的DOM属性-------window.devicePixelRatio DOM属性。这个属性的值就是当前设备的缩放倍数。例如，当window.devicePixelRatio的值等于“1.0”，则当前设备被认为中等密度的设备并不缩放；如果值等于“1.5”，这设备被认为是高密度设备并且页面 默认放大1.5倍；如果值是“0.75”，则这设备被认为是低密度设备，默认缩放0.75倍。Android浏览器和WebView的缩放是以页面目标像素问基础的----这Defining the viewport target density,这衣部分以做了描述，默认的密度是中等密度，但是你可以改变目标密度去影响你的web页面在不同屏幕上怎样去缩放。
例子，你可以通过js去查询设备的密度：
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");
}
android API Guides 之 web app -------------Targeting Screens from Web Apps（屏幕适配）
标签：android开发 web app webview webapp适配
原文地址：http://blog.csdn.net/ls703/article/details/45509073
