移动端单位相关概念

概念

1.尺寸相关概念

　　设备像素 pt（物理像素）分辨率 ，绝对像素    pt：像素点

　　css像素 px（设备独立像素、逻辑像素），

　　　　注意：在PC中默认1px = 1pt ， 在W3C标准中 ，px是一个视角单位

2.屏幕尺寸

　　英寸（inc）：长度单位　　

　　1inc = 2.54cm

3.像素密度（PPI）

　　ppi = 斜边长/屏幕尺寸

　　斜边长 =  Math.sqrt(Math.pow(纵向分辨率,2)+Math.pow(横向分辨率,2))

例如  iPhone6 Plus  

计算可得出

　　斜边长= Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2))

　　像素密度 = 斜边长/5.5 = 401ppi

　　

 

 

相对于相同尺寸下屏幕 ， ppi越多则像素越多 ，则发光的点越多，显示则越清晰

 

 

 ..

 

 于是就有了高清屏的概念

高清屏（视网膜屏）：相对于普通屏 ， 同面积下，ppi翻了一番

4.像素比（DRR）   

　　 DRP = 设备像素/css像素

 　　补充： 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代表允许

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。