最近工做任務主要是移動端內嵌H5頁面,一次與原生進行像素交互下,發現了這個天坑,再次作個記錄📝css
天坑以下:git
H5頁面中的「像素」與移動端設備的「像素」系統不一致,對於剛接觸這塊的我,曾經幾時在尚未遇到過這樣的狀況下,去看相關的文章一點體會也沒有,此次碰上了,而後又從新看了一遍,對這塊的理解也能比較有感覺了github
注意文中的英文表達,能夠幫助咱們更好的理解,由於一樣的英文表達能夠被翻譯成不一樣的漢文,這會妨礙咱們再查閱資料的時候混淆名詞概念web
是什麼?ide
一個物理像素是移動設備屏幕上最小的物理顯示單元,一般在設備的配置信心文件中能夠查看,例如某手機的配置信息以下:佈局
能夠得知,該設備的物理像素爲1920x1080
post
屏幕像素密度(pixels per inch) idea
是什麼?
spa
每英寸有多少像素點,簡稱ppi。根據上圖能夠知道改設備的ppi = 401,其實,這個值是能夠推算出來的翻譯
如何推算?
根據ppi公式:
套算: 這個設備的ppi = 根號(1920^2 + 1080^2)/ 5.5 = 401ppi
是什麼?
定義了物理像素和設備獨立像素的對應關係。 看着這個概念彷佛很凌亂,設備獨立像素是啥?對應什麼關係?在理解這個概念以前,必要的是瞭解移動端的viewPort,在瞭解viewport以前咱們須要瞭解三種視口
是什麼?
如何獲取佈局視口的寬高?
window.innerWidth/innerHeigt
是什麼?
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
理清了三種視口以後,咱們就能夠理解viewport了
工做原理:將全部DOM節點按照原始CSS邏輯像素(日常咱們寫代碼的css的像素大小)會在layout viewport 中按照visual viewport進行等比縮放,避免了DOM重繪致使的頁面凌亂問題
瞭解了viewport以後,咱們返回到的設備像素比以前瞭解一個名詞
是什麼?
設備獨立像素(也叫作密度無關像素),簡稱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
是什麼?
每一個像素的點數
缺點:
IE不支持DDPX
如何解決?
使用dpi表示
如何?
1inch = 96px , 1ddpx = dpr * 96 = 192dpi
用圖能夠這麼表示
能夠得出: 一個邏輯點(logic point)/邏輯像素須要一個或者多個的物理像素來展現,着取決於dpr