移動端與H5頁面畫素的差異與關係

承蒙時光發表於2019-05-16

 

最近工作任務主要是移動端內嵌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,其裝置畫素比為
根據公式 dpr = pp/ dip(dp)
推算出,這臺手機的裝置獨立畫素dp/dip = 375x 667 (750/2 x 1334/2)

用圖可以這麼表示

可以得出: 一個邏輯點(logic point)/邏輯畫素需要一個或者多個的物理畫素來展示,著取決於dpr

 

參考資料:

 

關於轉載:

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

相關文章