1. 程式人生 > >針對iPhone的pt、Android的dp、HTML的css像素與dpr、設計尺寸和物理像素的淺分析

針對iPhone的pt、Android的dp、HTML的css像素與dpr、設計尺寸和物理像素的淺分析

display 基本 stand 理解 android開發 height 請問 技術 -a

  最近被一朋友問到:css中設置一DOM的height:65px,請問顯示的高度是否和Android的65dp的元素等高?腦子裏瞬間閃現了一堆的概念,如dpr,ppi,dp,pt等,然而想了一陣,漿糊了,所以重新梳理了相關的知識,以備不時之需。

  1.ppi

  ppi指Pixels Per Inch也就是每英寸的像素點,此處的像素點就是物理像素點(也就是最小的顯示單元)。 ppi描述的是像素的密度,滿足以下公式

技術分享

此圖來源於uxabc(https://medium.com/uxabc/understanding-ui-units-8acdc0575388)

2.iPhone的pt與Android的dp

  第一代iphone手機的像素密度是163ppi,但是到了iPhone4的時候像素密度是326ppi,開發者發現初代的1px和iphone4下的1px顯示尺寸不相等了,無疑將增加適配的工作量,於是iphone開發者提出了一個pt的概念,即采用初代iphone1個像素點的大小作為基準,記作1pt(point),也就是說1pt在iphone4下的大小=2px的寬高。

技術分享

  同樣Android開發者也遇到了同樣的問題,google提出的解決方案是dp(Density-Independent Pixels),基準是160ppi下的1px代表的尺寸;

技術分享

  總之,pt和dp起著同樣的作用,就是把它當做設計和顯示的基本單位,避免使用px引發適配問題。

3.pt、dp與px之間的關系

  根據上面的描述,我們可以知道iphone4下1pt=2px,因為iphone4是326ppi,正好是基準的兩倍;但是iphone6+是401ppi,那在iphone6+下1pt等於多少px呢?大多數開發者都知道是3px,可是為什麽呢?我找到一個比較形象的示意圖:

技術分享

  按照圖中所示,設計圖都是按照pt來設計的, 設計圖的標準是:x1,x2和x3,也就是設計圖的像素為320x480,750x114,1242x2208,但是由於工藝原因,iphone6+的物理像素(分辨率)達不到1242x2208,所以只能做一次采樣處理(並非縮放,因為顯示尺寸並沒有變化,還是5.5 inch)

,顯示效果可能比真實的設計圖差一點,但是本身分辨率已經很高了。

4.HTML中的css像素和dpr

  在HTML中不得不提到viewport,經常會設置viewport的width=device-width,那這個device-width的值是多少呢?

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>  

  我們會發現在iphone5下device-width=320,iphone6下是375,iphone6+下是414,那也就是說device-width其實就是NA開發中屏幕寬度有多少pt和dp

device-width在html中也同樣被解讀為理想(基準)視口的寬度,即320px,375px,414px,這裏的px就是指css像素,通常也被稱為邏輯像素;那我們可以認為html中的css像素的顯示尺寸應該和NA中的pt、dp的顯示尺寸相等。

技術分享

  dpr,也被成為device pixel ratio,即物理像素與邏輯像素的比,那也就不難理解:iphone6下dpr=2,iphone6+下dpr=3(考慮的是柵格化時的像素,並非真實的物理像素);

  介紹完上面的概念,我們就可以問答一開始的問題了,css中設置一DOM的height:65px,顯示的高度應該和Android的65dp的元素等高。

  這些都是基礎概念,並沒有對前端開發過程中如何自適應做介紹,打算下一篇文檔介紹一下。

針對iPhone的pt、Android的dp、HTML的css像素與dpr、設計尺寸和物理像素的淺分析