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

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

　　初入移动web，一定要搞懂的几个单位（DPI、PPI、DP、PX 的详细计算方法及算法来源是什么？）：

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年之内超过苹果。然并卵，单单从这件事的结果来看，雷布斯更需要率领公司踏踏实实的做事情才能对得起自己当年夸下的海口。

转载于:https://www.cnblogs.com/dojo-lzz/p/5398470.html

从viewport发现小米手机参数不一致相关推荐

android+判断小米手机,android 判断手机为小米
释放双眼,带上耳机,听听看~! 之前,自己写了获取相册图片的代码,在自己手机上测试没有问题,不过小米手机却出现问题.在网上搜索资料,发现小米手机与其他德处理不同.所以今天写一下判断手机系统的内容.其 ...
android 小米手机播放短小音频无声音问题
最近,在给在给一个页面添加声音效果时,发现小米手机播放不了声音,发现其他机型可以播放 ,在此发现两种解决办法: 第一种,可以在小米手机设置中解决: 设置---声音和震动 -–音量--媒体音量,音乐,视 ...
android手机调用系统相册(兼容小米手机)
在android项目中我们往往会选择照片 , 比较懒的方式肯定是直接调用系统相册, 当然你也可以自己写一个相册读取 , 总结下我在项目中遇到的问题吧 , 目前是发现小米手机调用系统相册竟然弹出来一个选 ...
友盟推送小米手机通知栏图标显示问题
最近发现小米手机通知栏的icon显示成了一个灰色的方块, 如图所示发现友盟不支持自定义通知图标意思是小米的设备,是无法自定义图标的,这个显示的默认图标是无法进行修改的. 我自己按照小米推送的推送 ...
小米真机测试data文件夹看不见问题解决+小米手机线刷
学习Android己有一段时间,真机测试测试中遇到了一个很重要的问题data文件夹里的内容无法查看,这对于查看储存文件/数据库等都造成了极大的不方便. 网上的很多文章都提到过这个问题,需要修改权限,但 ...
小米手机touchend不触发问题
记录一个问题: touch的相关事件是页面上经常使用的,但是在小米手机上touchend事件竟然没法监听,事件光开始了,却怎么也停不下来. $("#btn").on({touchs ...
小米手机广告关闭攻略
自从买了小米手机,发现小米手机的广告真是无处不在,真的佩服他们产品的设计,昨天夜里我突然想做一个APP来专门收集这些,一个个找,找到打开的办法,终于今天一天搞定了,还不错,在这分享给你们,非小米可以略 ...
mac 电脑连接小米手机、魅族手机
大家会发现我们的小米手机即时开启了调试模式,usb连接到mac pro后Eclipse还是无法显示设备!这给我们在mac下开发android的同学带来了很大的不便解决办法: 1.把小米手 ...
小米手机无法monkey测试
最近在用monkey测试时,发现小米手机无法运行,总是提示无权限,提示异常如下: Injecting to another application requires INJECT_EVENTS per ...

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

从viewport发现小米手机参数不一致相关推荐

最新文章

热门文章