移动端与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

 

关于转载：

文中可能有错误，欢迎指点。 转载请注明出处。