移动端单位相关概念
概念
1.尺寸相关概念
设备像素 pt(物理像素)分辨率 ,绝对像素 pt:像素点
注意:在PC中默认1px = 1pt , 在W3C标准中 ,px是一个视角单位
2.屏幕尺寸
英寸(inc):长度单位
1inc = 2.54cm
3.像素密度(PPI)
ppi = 斜边长/屏幕尺寸
斜边长 = Math.sqrt(Math.pow(纵向分辨率,2)+Math.pow(横向分辨率,2))
例如 iPhone6 Plus
计算可得出
相对于相同尺寸下屏幕 , ppi越多则像素越多 ,则发光的点越多,显示则越清晰
..
于是就有了高清屏的概念
高清屏(视网膜屏):相对于普通屏 , 同面积下,ppi翻了一番
4.像素比(DRR)
补充: window.devicePixelRatio 可以访问DPR
devicePixelRatio在不同的浏览器中还存在些许的兼容性问题
套用公式,以iPhone6为例(没有缩放的情况下)
iPhone6 css像素为375px 而设备像素为750pt
750/375 = 2 ;2dpr 说明一个css像素占两个设备像素
以下图为例
当图片正常大小放在高清屏上显示 , 则只有整个屏幕的四分之一
如果需要正常显示大小 , 则需要将css像素放大两倍
高清屏中的图片会变得模糊 , 当一个设备像素对应一个css像素时图片才会相对清晰
所以 , 高清屏中的图片 , 需要按照高清屏的比例去做
例如:一张图片 ,在正常屏中 ,图片400*400时,正常显示不模糊,
在高清屏中 , 则需要用到800*800的图 ,才能正常显示
普通屏中的图片放到高清屏显示, 会变小
高清屏中的图片放到普通屏显示,会变大
4.viewport
viewport特性,一个移动专属的Meta值,用于定义视口的各种行为。
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。
在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:
width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"(设备实际宽度) |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置layout viewport 的高度,这个属性对我们并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。