因為web app跨平台的特性，決定着自適應方案在整個項目的重要性。
特別對於Android眾多分辨率和屏幕尺寸的機器群，找到合適通用的解決方案顯得尤為重要
1.頁面大小
有沒有遇到過一個情況？在iphone 4機器上開發時，明明分辨率是960*640，我們寫一個320px的容器，竟然占滿了屏幕寬；顯示一張100*100的圖片，會出現模糊失真，必須把圖片的寬高都縮小一倍，變成50*50才會正常。
導致上面情況的原因是什么呢？這和新的度量單位DPI有關
（1）PPI/DPI
PPI，有時也叫DPI，所表示的是每英寸所擁有的像素數目，數值越高，即代表顯示屏能夠以越高的密度顯示圖像。計算PPI的方法我借鑒了一些文章的圖片。
我們需要首先算出手機屏幕的對角線等效像素，然后處以對角線（我們平常所說的手機屏幕尺寸就是說的手機屏幕對角線的長度），就可以得到PPI了。
（2）px和像素的區別
首先我們需要明確一點，等值的CSS里面的px在手機屏幕上占多大的位置，這不是固定的，還要取決於屏幕的DPI。因為手機會根據DPI，對頁面進行自動 縮放來協調屏幕像素和尺寸之間的顯示效果。我們計算PPI就是為了知道一部手機設備是屬於哪個密度區間的，因為不同的密度區間，對應着不同的默認縮放比 例，這是一個很重要的概念。
圖1
可以看到，iphone 4的DPI是330，屬於xhdpi，默認縮放比例為2，這意味着1個css px實際上是顯示了兩個像素點，那么一個320px的容器占滿屏幕的情況就可以理解了，而圖片的顯示，因為在photoshop內表示圖片的 100*100像素是和屏幕像素對應的，那么在頁面內使用100px大小顯示圖片，情況就相當於在photoshop內將圖片放大一倍的效果，模糊、失真 是肯定的。
這個縮放比例影響了什么？它讓我們開發的時候，考慮的頁面大小並非簡單的等於屏幕分辨率，而應該是：
頁面大小 = 分辨率/DPI
舉些例子：
IPHONE 4 [640*960]/2 = [320*480]
HTC G11 [480*800]/1.5 = [320*533]
（3）DPI題外話
對於不同的DPI為什么要進行比例縮放，我的理解是這樣的：在超高DPI的機器上，意味着在僅有的屏幕尺寸上要分布着幾十萬個像素點，假如css px和手機像素是1:1的關系，我們在頁面上一個16px的字體，在手機屏幕上看可能就和一粒米一樣，所以在高清屏幕上，迫不得而必須把頁面比例放大讓內 容不至於太小看不清。
現在許多Android追求大屏幕，但是在分辨率不變的前提下，加大屏幕只是讓顯示的內容更大，並不會更清晰細膩。
喬布斯在2010年提出一個概念：“當你所拿的東西距離你10-12英寸（約25-30厘米）時，它的分辨率只要達到300dpi這個‘神奇數字’（每英 寸300個像素點）以上，你的視網膜就無法分辨出像素點了。”，這也是為什么蘋果的手機屏幕叫作視網膜屏（retina）
（4）市場占有率
我主要分析apple和android兩大陣營。apple來說，從iphone4和itouch4開始使用視網膜屏，而現在使用iphone4以下設備的應該不超過市場的10%，所以統一針對 640*960 DPI為330的頁面就行了。
而android情況要多很多，根據圖1，hdpi占了一半，而xhdpi和mdpi占4分1，ldpi可以忽略