移動端與H5頁面像素的差別與關係

 

最近工做任務主要是移動端內嵌H5頁面，一次與原生進行像素交互下，發現了這個天坑，再次作個記錄📝

天坑以下：

　　H5頁面中的「像素」與移動端設備的「像素」系統不一致，對於剛接觸這塊的我，曾經幾時在尚未遇到過這樣的狀況下，去看相關的文章一點體會也沒有，此次碰上了，而後又從新看了一遍，對這塊的理解也能比較有感覺了

先上總結：若是有不到位的，請告知修正:-P

理清幾個概念

注意文中的英文表達，能夠幫助咱們更好的理解，由於一樣的英文表達能夠被翻譯成不一樣的漢文，這會妨礙咱們再查閱資料的時候混淆名詞概念

物理像素（ physical pixel）

　　是什麼？

　　　　一個物理像素是移動設備屏幕上最小的物理顯示單元，一般在設備的配置信心文件中能夠查看，例如某手機的配置信息以下：

         能夠得知，該設備的物理像素爲1920x1080

 

屏幕像素密度（pixels per inch)　　

是什麼？

　　每英寸有多少像素點，簡稱ppi。根據上圖能夠知道改設備的ppi = 401,其實，這個值是能夠推算出來的

　　如何推算？

　　　　根據ppi公式：
　　　　　　

　　　　套算： 這個設備的ppi = 根號（1920^2 + 1080^2）/ 5.5 = 401ppi

設備像素比(device pixel ratio)

　　是什麼？ 

　　　　定義了物理像素和設備獨立像素的對應關係。 看着這個概念彷佛很凌亂，設備獨立像素是啥？對應什麼關係？在理解這個概念以前，必要的是瞭解移動端的viewPort，在瞭解viewport以前咱們須要瞭解三種視口

三種視口

1.視覺視口(visual viewport)

是什麼？

　　

如何獲取佈局視口的寬高？

window.innerWidth/innerHeigt 

 

2.佈局視口（layout viewport）

是什麼？

　　H5開發關注的視口，將要再多大的視覺視口（visual viewport）中渲染，不一樣設備的visual viewport不同，能夠經過 <meta name=「viewport」 content=「width=device-width」>來設置layout viewport等於visual viewport

如何獲取layout viewport的寬高？

document.body.clientWidth
document.documentElement.clientHeight/clientWidth

 2.  理想視口（ideal viewport）

 

理清了三種視口以後，咱們就能夠理解viewport了

viewport

　　工做原理：將全部DOM節點按照原始CSS邏輯像素（日常咱們寫代碼的css的像素大小）會在layout viewport 中按照visual viewport進行等比縮放，避免了DOM重繪致使的頁面凌亂問題

瞭解了viewport以後，咱們返回到的設備像素比以前瞭解一個名詞

設備獨立像素(density-independent pixel)

　　是什麼？ 

　　　　設備獨立像素（也叫作密度無關像素），簡稱DIP/DP能夠認爲是計算機座標系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素（好比css邏輯像素），而後由相關係統（好比移動端的webview）轉換爲物理像素，這就是爲何咱們老是可以在移動設備上看的和咱們H5的頁面相同的展現效果，固然，這個轉換，設備系統會幫咱們處理好的，咱們只是瞭解一下其中的原理，方便理解

理解了設備獨立像素以後，咱們再回過頭來看設備像素比，這裏有一個公式：

設備像素比 = 物理像素 / 設備獨立像素 // 在某一方向上，x方向或者y方向

根據這個公式，咱們就找到了設備獨立像素DIP和物理像素和設備像素比DPR之間的關聯

在H5頁面中得到到的DPR和移動設備或獲得的DPR是一致的，那麼H5怎麼獲取呢？

window.devicePixelRatio
or
-webkit-device-pixel-ratio
-webkit-min-device-pixel-ratio
-webkit-max-device-pixel-ratio
// 上面兩種方法取出的dpr的單位是ddpx

ddpx

是什麼？

　　每一個像素的點數

缺點：

　　IE不支持DDPX

如何解決？

　　使用dpi表示

如何？

 1inch = 96px , 1ddpx = dpr * 96 = 192dpi

 

最後，舉個例子應用一下咱們所知道的關係

某手機的物理像素爲 750X1334,其設備像素比爲 2 

根據公式 dpr = pp/ dip(dp)

推算出，這臺手機的設備獨立像素 dp/dip = 375x 667 (750/2 x 1334/2)

用圖能夠這麼表示

能夠得出： 一個邏輯點（logic point）/邏輯像素須要一個或者多個的物理像素來展現，着取決於dpr

 

參考資料：

https://github.com/kaola-fed/blog/issues/133

http://www.javashuo.com/article/p-ydqsarnf-t.html

https://www.jianshu.com/p/76130f4d7cf9

 

關於轉載：

文中可能有錯誤，歡迎指點。 轉載請註明出處。