Web App适配不同屏幕的几点建议

安卓设备在屏幕尺寸和像素密度上差别很大，因此在使用WebView加载网页时就需要考虑到这种差别，对我们的网页做出精心的设计以在不同的屏幕上都能得到合适的展现。通常情况下，我们需要考虑到两个因素：
1、视区（viewport）
所谓的视区指的是Web页面绘制的矩形区域。viewport有很多属性是我们可以设置的，比如视区的大小和初始比例。其中最重要的一个是要指定视区的宽度，它是网页展示的水平像素点的总数量（即CSS像素点的数量）。
2、屏幕密度
WebView以及Android上的多数浏览器会把网页的CSS像素值转换为dip值（即设备独立像素），一般以一个中等密度的屏幕尺寸为基准（约160dpi大小）。如果对图像的展示有更高的要求，就需要关注不同屏幕密度的比例了，因为一张宽为300px的图像在320dpi的屏幕上会被放大（每个CSS像素会使用到更多的物理像素点），这会使得图像变得模糊而出现锯齿。
dip的换算：dip（value）=(int) (px（value）/1.5 + 0.5)。

dpi（dot per inch），每英寸像素数，反映了屏幕的清晰度，如120dpi,160dpi等,假设QVGA(320*240)分辨率的屏幕物理尺寸是（2英寸*1.5英寸），则dpi=160。

 

Viewport属性的设置
我们的网页会在viewport指定的区域内进行绘制。尽管viewport的总的可视区域在我们把网页缩到最小时会与屏幕大小一致，viewport也有自己的像素范围属性供网页来进行控制。比如，对于物理宽度为480像素的屏幕尺寸来说，viewport的宽度可以达到800像素，这样当viewport的比例设置为1.0时，网页就可以基于800像素的宽度来设计以完全地展示在屏幕上。Android上的多数浏览器都会默认把viewport设置得更大（通常被称为“宽视区模式”，宽度约为980px）。很多浏览器也会默认把网页尽量缩小以完全地展示出viewport的宽度（称为“俯瞰模式”）。需要注意的是，WebView默认并没有启用宽视区模式，如需启用，需调用setUseWideViewPort()方法。
在Web页面中，我们可以通过标签的来设置viewport的宽度和初始比例等属性。下面列出了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"] " />

上面的例子指定了viewport的宽度为设备屏幕的宽度，并且不支持缩放操作。

通常情况下，我们都会把viewport的宽度设置为“device-width”，这样就可以在所有的屏幕上显示一致，然后通过CSS的媒介查询机制来灵活地进行布局以适配不同的屏幕尺寸。需要注意的是，只有在确保我们的网页布局能够灵活调整且网页内容能够适应小屏幕的宽度时我们才可以取消对缩放的支持。

 

通过CSS样式来设置适配不同设备屏幕密度
Android浏览器和WebView通过对CSS媒体特性“-webkit-device-pixel-ratio”的解析提供了对创建适配指定屏幕密度的CSS样式的支持。“-webkit-device-pixel-ratio”的取值为"0.75"、"1"和"1.5"，分别对应低密度、中等密度和高密度3种屏幕。比如，下面的代码针对高密度和中等密度屏幕分别创建了CSS样式文件：

或者是在一个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);
  }
}

关于如何对图片进行处理以适配不同屏幕密度的更多信息，请参考http://www.html5rocks.com/en/mobile/high-dpi/这篇文章。
通过JavaScript脚本来设置适配不同设备屏幕密度
Android浏览器和WebView提供了一个DOM属性window.devicePixelRatio来获取当前网页所在设备的屏幕密度。window.devicePixelRatio的取值与前面提到的“-webkit-device-pixel-ratio”的取值一致，都是"0.75"、"1"和"1.5"，分别对应低密度、中等密度和高密度3种屏幕。如果window.devicePixelRatio的值为"1.0"，则目标设备的屏幕为中等密度，那么网页默认不会有任何缩放；如果window.devicePixelRatio的值为"1.5"，则目标设备的屏幕为高密度，那么网页默认会放大为原来的1.5倍；如果window.devicePixelRatio的值为"0.75"，则目标设备的屏幕为低密度，那么网页默认会缩小为原来的0.75。下面的代码演示了如何利用该属性查询设备的屏幕密度：

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