手機解析度基礎知識(DPI,DIP計算)
1.術語和概念
術語 |
說明 |
備忘 |
Screen size(螢幕尺寸) |
指的是手機實際的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 |
摩托羅拉milestone手機是3.7英寸 |
Aspect Ratio(寬高比率) |
指的是實際的物理尺寸寬高比率,分為long和nolong |
Milestone是16:9,屬於long |
Resolution(解析度) |
和電腦的解析度概念一樣,指手機螢幕縱、橫方向像素個數 |
Milestone是854*480 |
DPI(dot per inch) |
每英吋像素數,如120dpi,160dpi等,假設QVGA(320*240)解析度的螢幕物理尺寸是(2英寸*1.5英寸),dpi=160 |
可以反映螢幕的清晰度,用於縮放UI的 |
Density(密度) |
螢幕裡像素值濃度,resolution/Screen size可以反映出手機密度, |
|
Density-independent pixel (dip) |
指的是邏輯密度計算單位,dip和具體像素值的對應公式是dip/pixel=dpi值/160,也就是px = dp * (dpi / 160) |
|
2. DPI值計算
比如:計算WVGA(800*480)解析度,3.7英寸的密度DPI,如圖1所示
圖1
Diagonal pixel表示對角線的像素值(=),DPI=933/3.7=252
3.手機螢幕的分類
3.1根據手機螢幕密度(DPI)或螢幕尺寸大小分為以下3類,如圖2所示
圖2
3. 2手機螢幕分類和像素密度的對應關係如表1所示:
|
Low density (120), ldpi |
Medium density (160), mdpi |
High density (240), hdpi |
Small screen |
QVGA (240x320) |
|
|
Normal screen |
WQVGA400 (240x400)WQVGA432 (240x432) |
HVGA (320x480) |
WVGA800 (480x800)WVGA854 (480x854) |
Large screen |
|
WVGA800* (480x800)WVGA854* (480x854) |
|
表1
3.3手機尺寸分布情況(http://developer.android.com/resources/dashboard/screens.html)如圖3所示,目前主要是以解析度為800*480和854*480的手機使用者居多
圖3
從以上的螢幕尺寸分布情況上看,其實手機只要考慮3-4.5寸之間密度為1和1.5的手機
4 UI設計
從開發角度講,應用程式會根據3類Android手機螢幕提供3套UI布局檔案,但是相應介面表徵圖也需要提供3套,如表2所示
Icon Type |
Standard Asset Sizes (in Pixels), for Generalized Screen Densities |
|
Low density screen (ldpi) |
Medium density screen (mdpi) |
High density screen (hdpi) |
Launcher |
36 x 36 px |
48 x 48 px |
72 x 72 px |
Menu |
36 x 36 px |
48 x 48 px |
72 x 72 px |
Status Bar |
24 x 24 px |
32 x 32 px |
48 x 48 px |
Tab |
24 x 24 px |
32 x 32 px |
48 x 48 px |
Dialog |
24 x 24 px |
32 x 32 px |
48 x 48 px |
List View |
24 x 24 px |
32 x 32 px |
48 x 48 px |
表2
5 如何做到自適應螢幕大小呢?
1)介面布局方面
需要根據物理尺寸的大小準備5套布局,layout(放一些通用布局xml檔案,比如介面中頂部和底部的布局,不會隨著螢幕大小變化,類似windos視窗的title bar),layout-small(螢幕尺寸小於3英寸左右的布局),layout-normal(螢幕尺寸小於4.5英寸左右),layout-large(4英寸-7英寸之間),layout-xlarge(7-10英寸之間)
2)圖片資源方面
需要根據dpi值準備5套圖片資源,drawable,drawalbe-ldpi,drawable-mdpi,drawable-hdpi,drawable-xhdpi
Android有個自動匹配機制去選擇對應的布局和圖片資源
手機的解析度 像素 密度和 螢幕尺寸是我們經常聽到的字眼,它們之間的關係如下:
解析度是指螢幕上有橫豎各有多少個容器點,每個容器點是用於容納一個像素的。
像素嚴格來說是指用於圖片上的,圖片上的像素點越多,圖片就越顯的清晰,當然也會越大。
手機可以有相同的解析度,但螢幕尺寸可以不相同,例如3.7英寸的螢幕可以是320*480的解析度,5.1英寸的螢幕也可以是320*480的解析度,那這2個螢幕在顯示時有什麼區別呢?
舉個例子:如果A手機螢幕寬度是5CM,B手機寬度是10Cm,寬度解析度都是320,那麼顯示同一張圖片時,B手機上的圖片就會顯的大一點,並且沒有A手機上的清晰。為什麼呢,這就是我們常見的密度(DPI)概念,即每英寸多少個點。本身一行5CM有320個點,DPI大約是150,現在是一行10CM有320個點,密度大約是75。密度大為減少,所以B手機顯示的圖片會變大,不清晰。就像我們使用Android Screen Monitor在電腦上顯示手機螢幕一樣,總感覺在電腦上顯示時有點大,這就是因為你電腦的解析度密度沒有手機的解析度密度大導致的,可以把電腦的解析度調大一點讓電腦螢幕密度和手機密度一致。
換算方式:
72像素/英寸=28.346像素/厘米
300像素/英寸=118.11像素/厘米
1 厘米=0.3937 英寸
1 英寸=2.54 厘米
像素不能直接換算成英寸、厘米,要在dpi下才能換算!
以常見1024像素對比:
1024像素=3.413英寸=8.67厘米 (300像素/英寸dpi 每英寸≈0.003333像素),所以1024像素的厘米尺寸就是:1024*0.003333*2.54
1024像素=14.222英寸=36.12厘米 (72像素/英寸dpi 每英寸≈0.013889像素),所以1024像素的厘米尺寸就是:1024*0.013889*2.54
提起解析度,我們需要瞭解兩個概念,映像解析度和輸出解析度。
映像解析度是每英寸的像素數,以ppi為單位,映像解析度又常常被表示成每一個方向上的總像素數量,比如640×480像素、1280×960像素等。而決定映像輸出品質的是映像的輸出解析度,描述的是裝置輸出映像時每英寸可產生的點數(dpi),以dpi為單位,兩者有聯絡但並不總是相等的。
dpi (dot per inch)輸出解析度
印表機解析度又稱為輸出解析度,是指在列印輸出時橫向和縱向兩個方向上每英寸最多能夠列印的點數,通常以“點/英寸”即dpi(dot per inch)表示。而所謂最高解析度就是指印表機所能列印的最大解析度,也就是所說的列印輸出的極限解析度。平時所說的印表機解析度一般指印表機的最大解析度,目前一般雷射印表機的解析度均在600×600dpi以上。
dpi是“dot per inch”的縮寫。顧名思義,就是指在每英寸長度內的點數。通常,我們都使用dpi來作為掃描器和印表機的解析度單位,數值越高表示解析度越高。目前,市面上出售掃描器的光學解析度主要有600×1200 dpi和1200×2400 dpi兩種。掃描器的光學解析度由兩個數字構成,是因為橫向解析度和縱向解析度不同。較小的數字通常為縱向解析度,即我們一般區分掃描器解析度用的數值。也就是說,600×1200 dpi的掃描器,我們通常簡稱為600 dpi。
電腦顯示器的解析度約為72dpi,這個數值其實是這樣計算出來的:以一部15寸的電腦顯示器為例,可視面積的水平長度大約為11.2寸,如果顯示模式是800×600,那麼解析度就是800/11.2=71.4。如果是17寸電腦顯示器,以1024×768的顯示模式來看,解析度就變成1024/12.8=80了。
像素(Pixel)
對於電腦的螢幕裝置而言,像素(Pixel)或者說px是一個最基本的單位,就是一個點。其它所有的單位,都和像素成一個固定的比例換算關係。所有的長度單位基於螢幕進行顯示的時候,都統一先換算成為像素的多少,然後進行顯示。所以,就電腦的螢幕而言,相對長度和絕對長度沒有本質差別。任何單位其實都是像素,差別只是比例不同。
如果把討論擴充到其它輸出裝置,比如印表機,基本的長度單位可能不是像素,而是其它的和生活中的度量單位一致的單位了。
CSS絕對長度單位是對於輸出裝置(output device)而言的。拿pt來說,這是一個在文字排版工具(word,adobe等)中非常常用的字型單位,不管你的顯示器解析度是1024*768,還是800*600,同一篇文檔列印在紙面上的結果是一樣的。
寫網頁用哪個長度單位更好,是px還是pt呢?
我個人比較偏向px,因為px能夠精確地表示元素在螢幕中的位置和大小,網頁主要是為了螢幕顯示,而不是為了列印等其它需要的。
CSS相對長度單位(relative length unit)
CSS相對長度單位中的相對二字,表明了其長度單位會隨著它的參考值的變化而變化,不是固定的。以下是CSS相對長度單位列表:
CSS相對長度單位
說明:
em 元素的字型高度The height of the element s font
ex 字母x的高度The height of the letter "x"
px 像素Pixels
% 百分比Percentage
CSS絕對長度單位(absolute length unit)
絕對長度單位是一個固定的值。比如我們常用的有mm,就是毫米的意思。以下是CSS絕對長度單位列表:
CSS絕對長度單位
說明
in 英寸Inches (1英寸 = 2.54 厘米)
cm 厘米Centimeters
mm 毫米Millimeters
pt 點Points (1點 = 1/72英寸)
pc 皮卡Picas (1皮卡 = 12 點)
像素是相對於顯示器螢幕解析度而言的。譬如,WiNDOWS的使用者所使用的解析度一般是96像素/英寸。而MAC的使用者所使用的解析度一般是72像素/英寸。所以在WiNDOWS的CSS中dpi為 96像素/英寸。
另附上對照表:
常見照片尺寸、像素及列印尺寸對照表(實用)
英寸 照片規格 |
厘米 |
像素 |
數位相機類型 |
列印尺寸 解析度:300dpi |
1寸 |
2.5×3.5cm |
413×295 |
/ |
/ |
身份證大頭照 |
3.3×2.2 |
390×260 |
/ |
/ |
2 |
3.5×5.3cm |
626×413 |
/ |
/ |
小2寸(護照) |
4.8×3.3cm |
567×390 |
/ |
/ |
5寸 |
12.7×8.9 |
1200×840以上 |
100萬像素 |
/ |
6寸 |
15.2×10.2 |
1440×960以上 |
130萬像素 |
/ |
7寸7×5 |
17.8×12.7 |
1680×1200以上 |
200萬像素 |
12.7x17.7 |
8寸8×6 |
20.3×15.2 |
1920×1440以上 |
300萬像素 |
15.2x20.3 |
10寸10×8 |
25.4×20.3 |
2400×1920以上 |
400萬像素 |
20.3x25.4 |
12寸12×10 |
30.5×20.3 |
2500×2000以上 |
500萬像素 |
25.4x30.5 |
15寸15×10 |
38.1×25.4 |
3000×2000 |
600萬像素 |
25.4x38.1
|
最近做項目發現,同樣的解析度2台機器,某個介面的樣式就是不一樣,經過多次測試發現,原來第一台pad(lenovo A1_07)的密度為1.5,轉換成dpi是240,屬於高密度;另一台pad的密度為1,屬於中等密度,轉換成dpi就是160,應該屬於中等密度
這就發現問題了, 解決方案:
應該在values檔案夾下面分別放置values-hdpi, values-mdpi分別對應的樣式,就OK了
以下是學習資料
screen resolution
把裝置上的物理dpi 用乘法轉換成 dips
Androidname approx. resolution multiply by this get dips
ldpi ~120 dpi 1.333
mdpi ~160 dpi 1.0 (基準密度)
tvdpi ~213 dpi 0.751
hdpi ~240 dpi 0.67
xhdpi ~320 dpi 0.5
dpi:每英吋像素數(密度*160)
density:密度
手機像素密度(density)實際上是以單位英寸160個像素作為參考標準,主要密度有0.75,1,1.5和2,當密度為2時就表示1英寸有320個像素,Android中通過代碼可以擷取到螢幕的像素值和密度,根據這些值就可以反向算出螢幕的物理尺寸
螢幕尺寸=螢幕對角線的像素值/(密度*160)= [(長的平方+寬的平方)開根號] / (密度*160)
實踐過程:
由於Android裝置中擷取的密度density本身是個約等於的數值,比如計算出密度的準確值density=1.575,實際在代碼中讀到的density=1.5, 需要實現一個簡單的計算螢幕尺寸的應用在不同裝置上驗證物理尺寸準確程度,具體代碼如下:
DisplayMetrics metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthPixels; // 螢幕寬度(像素)
int height = metric.heightPixels; // 螢幕高度(像素)
float density = metric.density; // 螢幕密度(0.75 / 1.0 / 1.5)
int densityDpi = metric.densityDpi; // 螢幕密度DPI(120 / 160 / 240)
double diagonalPixels = Math.sqrt(Math.pow(width, 2)+Math.pow(height, 2)) ;
double screenSize = diagonalPixels/(160*density) ;
有可能上面的計算螢幕的尺寸不是太準確