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

Android屏幕适配问题太烦人了，查阅了各种学术名词终于搞定了，下面是调研过程和结果。 各种名词中关键是dpi，通俗来讲dpi就是单位尺寸中的点数。这个点是什么东西呢，点是个物理概念，你可以把他看作一个像素(注意只是看成，不完全一样)。 把点理解为像素dpi就变成了ppi单位尺寸中的像素数。 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图决定。

　　本文来自chaos.forfun博客，原文地址：http://www.cnblogs.com/chaos-forfun/archive/2013/02/18/2915449.html