目前在為移動裝置設計界面時，最頭疼的問題莫過于尺寸的問題。我們無法使用固定的尺寸來進行設計，因為不同裝置的大小千變萬化。但是如果我們了解了裝置的實體特性後，這将有助于我們進行更好的設計。
不同的裝置可能具有相同的螢幕分辨率，但是他們的實體特性差别卻非常大。一代iPad的螢幕尺寸是9.7寸，分辨率為1024*768、132dpi。Kindle Kyeboard 3G的實體尺寸隻有6寸，同樣是768*1024的分辨率，像素卻是212dpi。
擷取螢幕的尺寸有很多種辦法，包括" Resolution Media Query "，這種辦法作為 Media Queries的規範已經存在很長時間，但是在還沒有正式釋出之前，不是所有的浏覽器都支援。但是很幸運，WebKit在這方面已經邁出了重要一步，下面是基本的用法：
@media ( min-resolution: 250dpi ){
}
這句話可以将低分辨率圖檔過濾掉，隻保留高分辨率的圖檔。
實際上對于設計師來說，他們對分辨率并不是那麼感興趣。因為他們是為人類而設計，是以最好有 width: 1寸，這樣的機關。可惜的是，當今的社會是電子化的社會，實體的尺寸和電子像素不完全一緻，做為設計師，我們需要來填補這兩個不同之間的鴻溝。
來比較一下下面的兩段代碼：
@media (min-resolution:341dpi) and (min-width: 767px) > {
@media (max-resolution:131dpi) and (min-width: 767px) > {
粗看上去，這兩段代碼非常相似，實際上是用來區分不同裝置的，第一個适用于 HTC Windows Phone 8X，第二個适用于 iPad2。通過使用 Resolution Query，可以将小裝置同大裝置區分開。兩個裝置的的寬度都是768px，實體尺寸一個是10英寸（iPad），一個卻是4.3英寸（HTC）。更重要的是，iPad的分辨率比較低（1024*768），而HTC的分辨率比較高（1280*768）。通過 Resolution Media Query 和 Width Query 的配合使用，我們能夠将具有同樣寬度的不同大小的裝置區分開，進而來相應的調整設計中的元素布局。
之前說過，實際上我們對于各個裝置的分辨率并不是很關心，我們更加關心的是，這個界面是顯示在一個（實體尺寸上）較大的裝置還是較小的裝置上。那麼，我們又該如何定義大裝置和小裝置呢？實際上并沒有明确的分割，我們必須從每個項目的實際出發，這個裝置在這個項目中是小裝置，但在另外一個項目中，可能被歸類為大裝置。
The Physical Size Inquiry Non-Exhaustive Theorem
理論：在一個組合的查詢中，如果 分辨率 Resolution 與 寬度和高度中的較小的一個的比值大于5，那麼基本上可以歸屬為大裝置，如果小于5，基本上可以歸屬為小裝置。如果得分接近于5，那麼是一個中等的裝置，實體上的尺寸接近于1張A4紙的大小（21*29.7cm）。
下面是一個驗證這個理論的表格：
裝置名稱
對角線尺寸（inches)
分辨率
PPI
PSINET得分
Apple iMac
27
2560*1440
109
13.00
Sony Vaio F
16.4
1920*1080
134
8.05
Apple MacBook Pro RD
2560*1600
227
7.04
Sony PSP
4.3
480*272
128
3.75
Kindle Keyboard 3G
6
768*1024
212
3.62
Kindle Fire
7
1024*600
169
3.55
Samsung Galaxy S
4
480*800
160
3.00
Samsung Galaxy Note II
5.5
720*1280
267
2.69
Samsung Galaxy S IV
5
1080*1920
441
2.62
HTC Butterfly
Samsung Galaxy Grand I9082
187
2.56
Palm Pre
3.1
480*320
186
2.5
Sony Xperia Z
443
2.43
Samsung Galaxy S III
4.8
306
2.35
LG Nexus 4 E960
4.7
768*1280
318
2.41
Nokia Lumia 920
4.5
1280*768
332
2.31
HTC One
469
2.30
HTC One X
312
HTC Desire HD
217
2.21
iPhone 5
640*1136
326
1.96
Apple iPod Touch
3.5
960*640
Apple iPad(1 & 2)
9.7
1024*768
132
5.81
Apple iPad(3rd Gen)
2048*1536
264
Amazon Kindle DX
824*1200
150
5.49
MICROSOFT SURFACE
10.1
1366*768
148
5.18
iPad Mini
7.9
162
4.74
使用PSINET判斷裝置的尺寸隻是一個假設，這個假設在裝置的長寬相差不大的情況下還比較準确，如果長寬差别太大，這個數字就不準确了。
PPI的計算公式，如果一個螢幕寬1280px，高720px，對角線尺寸為4.3inches，那麼PPI的計算方式為：
參考資料：