1px 究竟是多大
一、引言
1px 究竟是多大?这应该是一道很不错的面试题。且看:
1、iphone6s 的分辨率是1920px * 1080px
2、iphone6s 全屏截图文件的尺寸是1242px * 2208px
3、iphone6s 的宽度是414px
4、iphone6s 不加 viewport 的情况下,window.innerWidth = 980px
5、iphone6s 加 viewport 且 scale 都为1的情况下,window.innerWidth = 414px
6、iphone6s 加 viewport 且 scale 都为.5的情况下,window.innerWidth = 829px
这些px单位都是啥?
二、几个关键概念
设备像素:设备的物理像素,其尺寸大小是绝对的
逻辑像素:CSS的像素单位,其尺寸大小是相对的,也称为独立像素
分辨率:屏长的设备像素 × 屏宽的设备像素
dpi(dots per inch):像素密度,表示水平或垂直方向每英寸长度的像素数目
ppi(pixels per inch):像素密度,表示沿对角线每英寸长度的像素数目
(dpi和ppi其实不就是一回事吗,呵呵)
缩放因子(Scale Factor):逻辑像素相对于设备像素的放大比例,可通过window.devicePixelRatio获得,但二者并不完全等同
关系一:
设备尺寸 × 像素密度 = 分辨率(设备像素)
举例:
iphone6s对角线长度为5.5 inches,像素密度401 ppi,分辨率 1920 * 1080,计算可得对角线的设备像素为2205.5。
5.5 * 401 = 2205.5
关系二:
逻辑像素 = 设备像素 × 缩放因子
举例:
iphone6逻辑像素为375 * 667,分辨率为750 * 1334,缩放因子为2
1个逻辑像素 = 设备宽度的1/375
1个设备像素 = 设备宽度的1/750
1/375 = 1/750 * 2
三、纠结的缩放
设备像素都是固定的,所以逻辑像素大小由缩放因子决定,那么缩放因子由什么决定?到底放多大才合适?
对于桌面设备,逻辑像素通常就等同于物理像素,本来是不用考虑缩放问题的。一切问题的根源就在于:屏幕变得越来越高清,ppi 越来越大。比如我现在用的 PC 是1920px的高清屏,如果没有缩放,所有的东西看起来都会比较小,因此需要放大:
所以决定缩放因子大小的,就是像素密度,密度越大、越高清的屏幕,需要的缩放比例就越大。
PC 上的缩放比例是自定义的。那么移动端的缩放比例是怎么确定的呢?
答案是 viewport。
viewport 就是屏幕那块儿固定的可视区面积。默认情况下,移动端浏览器会将 viewport 宽度设为980px(也有可能是1024px或其它值),也就是说1px = 设备屏幕宽度的1/980。这跟缩放因子没有任何关系。
这时的1px非常小,所有的元素都变得非常小,移动端浏览器之所以这么做,是为了尽可能完整的显示 PC 端的网页,然后允许用户通过缩放来查看细节。
如果我们不希望采用默认的设置,就需要人工设置 viewport:
<meta name="viewport" content="width=device-width">
将 viewport 宽度设为设备宽度,那么这里的设备宽度到底是什么呢?这就跟缩放因子有关系了。iphone4 ~ iphone6的 ppi 都是326,缩放因子都是2,所以1个逻辑像素的大小等于2个设备像素。
设备 |
设备分辨率 |
缩放因子 |
逻辑分辨率 |
ppi |
4s |
640 * 960 |
2 |
320 * 480 |
326 |
5s |
640 * 1136 |
2 |
320 * 568 |
326 |
6 |
750 * 1334 |
2 |
375 * 667 |
326 |
对于 iphone6,1px = 屏幕宽度的1/375,相比1/980放大了不少,而这时候的1px就是一个比较理想的大小,即比较符合我们在 PC 端使用 px 时的感受。也就是说326的 ppi对应的放大比例是2,326 : 2是一个经验比率(1px = 1/163inch),实践检验比较妥,所以就这么定了。所以如果是652的 ppi,则放大比例为4。
实际上在 CSS2.1 中有这么一条:如果显示设备的像素密度与典型的电脑显示器差异明显,用户代理应当重新调整像素值。建议以阅读者在一臂距离处观察到的像素密度为96 dpi 的设备上的一个设备像素作为参考像素,大约为1/96 inch,0.26mm。
但是这条建议实在是跟不上屏幕进化的速度,所以在PC端都没有得到执行,更何况移动端。你可以在 PC 上画一个100px的正方形,按照上述标准,这个100px的正方形应该和一个一元硬币(直径25mm)差不多大小。你比较一下,如果正方形比硬币大,就说明你的屏幕 ppi 有些低。(分辨率调得太低或者是放大比例调得太高除外)。
我算了下,我电脑上一个逻辑像素大约为1/113 inch,那么移动端将1/163 inch作为逻辑像素的参考大小,就说明我电脑上一个16px 的字,在手机上会缩小到大约三分之二,这是符合我的使用经验的。
四、iphone6 plus
iphone6s的 ppi 达到了401,按照比率,它的缩放因子应该等于2.6。
设备 |
设备分辨率 |
缩放因子 |
逻辑分辨率 |
ppi |
6s |
1080* 1920 |
3 |
414 * 736 |
401 |
但是2.6这一奇葩的比例不太方便切图,所以 iphone6s 就直接改成了3,然后再整体压缩87%(2.6 / 3)。这也是为啥iphone6s全屏截图的尺寸是1242 * 2208。
五、三种场景
1、ppi适配
ppi适配要解决的问题是:在最小基本单位尺寸不固定的情况下,如何找到一个固定大小的尺寸单位。
对于文字,我们希望16px的文字无论在什么样的屏幕下看起来都是一样大的。也就是说我们希望这里的px是一个实际物理尺寸固定的单位。
设置viewport就可以实现这个目的:
<meta name="viewport" content="width=device-width">
1个逻辑像素的尺寸 = 1 / ppi * 缩放因子 = 1/163 inch
所以说设置 viewport 本质上是把 px 变成了一个“绝对单位”。
那么用 cm 或 mm 作为尺寸单位行不行呢?我认为是符合此场景的,只不过有些反人类。
2、resolution适配
分辨率适配要解决的问题是:找到一个相对单位,使得同一尺寸在不同大小的屏幕上看上去相对大小一致。
比如一张宽100%,高100unit 的 banner 图,我们希望它在任何大小的屏幕上能够等比例缩放,因此我们需要这里的unit是一个相对单位。
vw 和 vh 就是很好的相对单位,但考虑到兼容性,只有用 js 实现一个 vw,具体可参见文末链接。
3、dpr适配
devicePixelRatio 适配要解决的问题是:在设置了 viewport,width=device-width 的情况下,如何画出1px(设备像素)的问题。
dpr=2意味着 CSS 中的1px 会用两个设备像素来渲染,在 iphone6s 上更会用3个设备像素来渲染。
解决的方案大致有:用小数、用图片、用渐变、用阴影、用 transform 缩放。手机淘宝的做法是使用 js 动态设置 viewport 的 initial-scale。
设备 |
1px大小 |
devicePixelRatio |
缩放因子 |
逻辑分辨率 |
initial-scale |
iphone6s |
3个设备像素 1/414屏宽 |
3 |
3 |
414 * 736 |
1 |
1.5个设备像素 1/828屏宽 |
3 |
1.5 |
828 * 1472 |
.5 |
|
6个设备像素 1/207屏宽 |
3 |
6 |
207 * 368 |
2 |
以上三类问题可以总结为:绝对单位问题、相对单位问题、最小单位问题。
参考:
《手机淘宝的flexible设计与实现》
http://www.html-js.com/article/2402
《7种方法解决移动端Retina屏幕1px边框问题》
http://www.jianshu.com/p/7e63f5a32636
1px 究竟是多大的更多相关文章
- FPGA做正则匹配和网络安全,究竟有多大的优势?
FPGA做正则匹配和网络安全,究竟有多大的优势? 西电通院专用集成电路课程学习 云导播 网络安全已经被提升为国家战略的高度,高校里面的新增的一级学科,去年9月份,中央网信办.教育部公布了“一流网络安全 ...
- IP分片 与 TCP分段的区别 !!!!careful========以及udp中一个包大小究竟为多大合适 ==========三次握手四次挥手细节
首先声明:TCP分片应该称为TCP分段 TCP/IP详解--TCP的分段和IP的分片 分组可以发生在运输层和网络层,运输层中的TCP会分段,网络层中的IP会分片.IP层的分片更多的是为运输层的UDP服 ...
- 什么是AR技术?AR的价值究竟有多大?
什么是AR技术? AR技术,解释来说就是增强现实(Augmented Reality),是一种实时地计算摄影机影像的位置及角度并加上相应图像.3D模型的技术,它的目标是把虚拟世界嵌套进真实世界进行互动 ...
- Android 开发绕不过的坑:你的 Bitmap 究竟占多大内存?
0.写在前面 本文涉及到屏幕密度的讨论,这里先要搞清楚 DisplayMetrics 的两个变量,摘录官方文档的解释: density:The logical density of the displ ...
- SP服务商收益究竟有多大?
揭秘spspsp服务商怎样盈利?代办sp服务商又称持增值电信----移动网信息服务许可证信息提供商,sp主要业务有短信彩信(手机报.短信群发.客服系统).WAP.彩铃.IVR.百宝箱.JAVA游戏.B ...
- linux 线程切换效率与进程切换效率相差究竟有多大?
Author:DriverMonkey Mail:bookworepeng@Hotmail.com Phone:13410905075 QQ:196568501 Are Linux threads t ...
- 【转】大数据以及Hadoop相关概念介绍
原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4230220.html 感谢! 一.大数据的基本概念 1.1.什么是大数据 大数据指的就是要处理的数据是TB级别以 ...
- CSDN专访:大数据时代下的商业存储
原文地址:http://www.csdn.net/article/2014-06-03/2820044-cloud-emc-hadoop 摘要:EMC公司作为全球信息存储及管理产品方面的领先公司,不久 ...
- 大数据以及Hadoop相关概念介绍
一.大数据的基本概念 1.1.什么是大数据 大数据指的就是要处理的数据是TB级别以上的数据.大数据是以TB级别起步的.在计算机当中,存放到硬盘上面的文件都会占用一定的存储空间,例如: 文件占用的存储空 ...
随机推荐
- 整型转字符串(convert int to char)优化实践
0. 前言 其实基本都没什么机会做这么一个基础的优化,一般基础库里就有函数可以直接拿来用. 这里以snprintf为基准,给大家展示一下每一个优化带来的些许收益. 1. 优化过程 1.最初使用的是sn ...
- Android 自定义 View 圆形进度条总结
Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...
- Chosen通用初始化
一直在用Chosen这个js插件,其目的就是美化下拉框.github地址:https://harvesthq.github.io/chosen/ no_results_text:"xxxxx ...
- iOS集成ApplePay
Apple Pay正式在国内上线的那天,一起工作的小伙伴就走进了Starbucks,7-11等带有银联闪付的店进行了尝鲜.不管是否要再次输入一次密码,但是它的出现确实给我们带来了极大的便捷.下面就尝试 ...
- Django and Djangorestframework
NOte Today, another day debuging with my teammates, and I just tried to make complete comprehension ...
- 黑苹果引导工具 Clover 配置详解及Clover Configurator使用
黑苹果引导工具 Clover 配置详解及Clover Configurator使用 2017-03-11 14:01:40 by SemiconductorKING 转自:@三个表哥 简介: 可 ...
- Contains Duplicate leetcode
Given an array of integers, find if the array contains any duplicates. Your function should return t ...
- MVC支付宝PC网站接口对接
PC网站支付接口,请参考支付宝官方文档:https://b.alipay.com/signing/productSet.htm?navKey=all 1.需要提供签约账号.商户密钥 2.代码实现: 支 ...
- 卸载php+apache+mysql
一.卸载删除 mysql 1 sudo apt-get autoremove --purge mysql-server-5.0 2 sudo apt-get remove mysql-server ...
- web从入门开始(5)-----表单
1. 表单的概念 是用来获取客户端用户数据的(信息)的.如:注册表单,查询表单,登录表单等. 2. 表单的工作原理 1.浏览有表单的网页,填写一些必要的信息,然后单击某个按钮,进行提交. 2.这 ...