手机h5像素_移动端与H5页面像素的差异与关系

最近工作任务主要是移动端内嵌H5页面，一次与原生进行像素交互下，发现了这个天坑，再次做个记录📝

天坑如下：

H5页面中的“像素”与移动端设备的“像素”系统不一致，对于刚接触这块的我，曾经几时在还没有遇到过这样的情况下，去看相关的文章一点体会也没有，这次碰上了，然后又重新看了一遍，对这块的理解也能比较有感受了

先上总结：如果有不到位的，请告知修正:-P

理清几个概念

注意文中的英文表达，可以帮助我们更好的理解，因为同样的英文表达可以被翻译成不同的汉文，这会妨碍我们再查阅资料的时候混淆名词概念

物理像素( physical pixel)

是什么？

一个物理像素是移动设备屏幕上最小的物理显示单元，通常在设备的配置信心文件中可以查看，例如某手机的配置信息如下：

可以得知，该设备的物理像素为1920x1080

屏幕像素密度(pixels per inch)

是什么？

每英寸有多少像素点，简称ppi。根据上图可以知道改设备的ppi = 401,其实，这个值是可以推算出来的

如何推算？

根据ppi公式：

套算：这个设备的ppi = 根号(1920^2 + 1080^2)/ 5.5 = 401