从viewport发现小米手机参数不一致
2016-04-16 15:16
211 查看
想要在移动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:代表设备缩放比
由设备像素到逻辑像素的变换公式为:
其中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:
对viewport有疑问的同学请看这篇文章:移动前端开发之viewport的深入理解
然后设置image的宽度:
iphone6:
小米4c:
试验运行结果为:
iphone6完全符合预期:
然而小米4得到的结果是
上图可以看到小米手机出现了滚动条,也就是说根据官方数据我们得到的结果是错误的。问了一下在小米工作的哥们,得知他们的设计都是以720为标准的,但是css像素肯定不是720px,是否有可能是360呢,将图片宽度设为360px发现完美符合。
根据360这个结果,假设小米官方中441ppi是准确的,我们反推屏幕分辨率发现根本达不到1920 * 1080.
那就让人纳闷了,然后我读取了一下window.devicePixelRadio,发现小米手机中chrome浏览器得到的结果是3.
根据devicePixelRadio的到的结果,发现1080p的屏幕分辨率完全符合,这样一来ppi的数据肯定是错误的。
这尼玛可太坑了,记得当年雷军信誓旦旦的说过,小米要在10年之内超过苹果。然并卵,单单从这件事的结果来看,雷布斯更需要率领公司踏踏实实的做事情才能对得起自己当年夸下的海口。
初入移动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年之内超过苹果。然并卵,单单从这件事的结果来看,雷布斯更需要率领公司踏踏实实的做事情才能对得起自己当年夸下的海口。
相关文章推荐
- jquery 实现滚动条下拉时无限加载
- C#一般处理程序设置和读取session(session报错“未将对象引用设置到对象的实例”解决)
- 将dp转换为px
- 二极管相关知识
- 如何检测 51单片机IO口的下降沿
- 程序设计语言编译方法—引言
- linux连接windows
- 《LeetBook》leetcode题解(14):Longest Common Prefix[E]
- 网络的介数中心性(betweenness)及计算方法
- Python install easy_install and pip
- javaScript随机生成一个5位以内的数,及数组对象Array原型forEach解析
- TexturePacker 命令行批量处理 导位图字体
- ubuntu 15 安装Qt
- ubuntu15.04在安装完vmware11后打开提示 VMware Kernel Module Updater
- maven的setting 文件阅读
- Python 练习实例27
- 常用函数
- 什么是渐进增强,优雅降级
- oracle用户默认表空间
- 字符串数组元素排列与组合的Java递归实现