html5开发Android应用屏幕适配问题

html5开发Android应用屏幕适配问题

Android屏幕适配问题太烦人了，查阅了各种学术名词终于搞定了，下面是调研过程和结果。
各种名词中关键是dpi，通俗来讲dpi就是单位尺寸中的点数。这个“点”是什么东西呢，点是个物理概念，你可以把他看作一个像素（注意只是看成，不完全一样）。
把点理解为像素dpi就变成了ppi——单位尺寸中的像素数。
Android设备分辨率差异比较大，而且各设备dpi还不一样。
这就比较操蛋了，导致同样的像素在不同设备下显示大小不一样。
举个简单的抽象例子，
设备A大小为100*100英寸，分辨率为100*100，这个时候A的dpi为1。
设备B大小同样为100*100英寸，分辨率变为了200*200，这个时候B的dpi为2。
然后大小为100*100px的图片在A设备上会铺满屏幕在B设备上却只占半屏，长宽都缩小了一半。
 
还好Android给出了解决放方案就是用dp来代替px作为单位。dp会根据设备的dpi来转换为像素然后显示。
例如：
在160dpi的设备下1dp=1px；
在320dpi的设备下1dp=2px；
 
但是用html5开发的时候css的单位没有dp啊，怎么办？？？
 
解决问题的关键来了，请注意
 
要实现适配需要viewport属性，各种资料在谈论html5开发Android应用的时候都谈到了viewport，而且大多数都是这么写的。
<meta name="viewport" content="width=device-width,initial-scale=1">
这么些远远不够，根本没有解决像素适配的问题。系统仍然会采用自身设备的dpi。应该再添加点东西，变成这样
<meta name="viewport" content="width=device-width,initial-scale=1,target-densitydpi=[dpi-value|device-dpi|high-dpi|medium-dpi|low-dpi],user-scalable=no">
具体采用那个dpi值由你的设计师给你的psd图决定。