最近工作任務主要是移動端內嵌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
最后，舉個例子應用一下我們所知道的關系
用圖可以這么表示
可以得出： 一個邏輯點（logic point）/邏輯像素需要一個或者多個的物理像素來展示，着取決於dpr
參考資料：
關於轉載：
轉載請注明出處。