从viewport发现小米手机参数不一致

2021-07-23 09:24:55

　　想要在移动web领域有所深造的小伙伴，第一关要过的就是逻辑像素与设备像素之间的关系。

dip（dp）: device independent pixels(设备独立像素)，是安卓开发用的单位，1dp表示在屏幕点密度为160ppi时1px长度。
dpi:dot per inch，dpi是dot per inch，每英寸多少点，ppi是 Pixel per inch，每英寸像素数，针对显示器的设计时，dpi=ppi。
ppi:pixels per inch，ppi表示显示设备的点密度，dpi表示印刷品点密度。
px:pixel，这个就是我们常说的css像素
dpr：代表设备缩放比

　　由设备像素到逻辑像素的变换公式为：

    1px = 1dp * dpr;

　　dpr = ppi / 160;

　　ppi = sqrt(w*w + h * h) / 屏幕尺寸；

　　其中w、h的单位为dp，屏幕尺寸通常指的是对角线长度，单位为英寸（之所以要用对角线来计算，是因为屏幕对角线长度（屏幕尺寸）是厂商制造时就定好的精确数值。而宽和高都需要计算才能得到）。

　　我们先用i以上公式来计算phone6的css像素：

　　iphone6参数为：4.7英寸，分辨率：1334 * 750

　　iphone6的ppi为：sqrt(1334 * 1334 + 750 * 750) / 4.7 = 325.612.....

　　iphone6的dpr为：325.612 / 160 = 2.03...

　　所以iphone6的css像素为：667 * 375

　　然后利用手头小米4c手机计算一下：

　　根据官网数据，441ppi得dpr为2.75625，而后得小米4c的css像素为：696 * 391。

　　接下来我们要通过viewport来验证一下我们的结果是否正确。

　　首先设置meta标签来控制viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

　对viewport有疑问的同学请看这篇文章：移动前端开发之viewport的深入理解

　　然后设置image的宽度：

　　iphone6：

<img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4076061544,2828946912&fm=73" style="width:375px"/>

小米4c：

<img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4076061544,2828946912&fm=73" style="width:390px"/>

　试验运行结果为:

　　iphone6完全符合预期：然而小米4得到的结果是

　　上图可以看到小米手机出现了滚动条，也就是说根据官方数据我们得到的结果是错误的。问了一下在小米工作的哥们，得知他们的设计都是以720为标准的，但是css像素肯定不是720px，是否有可能是360呢，将图片宽度设为360px发现完美符合。

　　根据360这个结果，假设小米官方中441ppi是准确的，我们反推屏幕分辨率发现根本达不到1920 * 1080.　　

　　那就让人纳闷了，然后我读取了一下window.devicePixelRadio,发现小米手机中chrome浏览器得到的结果是3

alert(window.devicePixelRatio)

　根据devicePixelRadio的到的结果，发现1080p的屏幕分辨率完全符合，这样一来ppi的数据肯定是错误的。

　　这尼玛可太坑了，记得当年雷军信誓旦旦的说过，小米要在10年之内超过苹果。然并卵，单单从这件事的结果来看，雷布斯更需要率领公司踏踏实实的做事情才能对得起自己当年夸下的海口。

码农公寓