关于像素,括号中为别名
设备像素(物理像素)
DP(Device Pixel),显示屏上的像素点,出厂即确定。
设备无关像素(设备独立像素)
DIP(Device Independent Pixel),缩放比为1时,设备独立像素也等于CSS像素(逻辑像素)。我们通过CSS和javascript代码设置的像素都是逻辑像素。在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位,px是一个相对单位,相对的是设备像素(device pixel)。显示器上的小色框就是像素。
设备无关像素与CSS像素之间的关系 —— 页面缩放比
页面缩放比 = CSS像素/设备无关像素
设备像素与设备无关像素之间的关系 —— DPR
一般情况下,
设备像素比DPR = 设备像素/设备无关像素(在某一方向上,x方向或者y方向)
缩放比为1时, 设备无关像素等于CSS像素,因此
设备像素比DPR = 设备像素/CSS像素(在某一方向上,x方向或者y方向)
缩放比为1时,iphone4下dpr=2,iphone6 plus及以后dpr=3。
以iphone6为例,iphone6的CSS像素为375px*677px
,DPR是2,所以其设备像素为750px*1354px
(x和y方向都乘了2)。
设备像素与CSS像素之间的关系
在PC端,CSS的1px往往等于一个设备像素。而在移动端,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。以iPhone为例,iPhone4之前的手机,屏幕像素密度都较低,CSS的1px等于一个设备像素。但从iPhone4开始,乔布斯提出了Retina视网膜屏的概念。此时一个CSS像素等于(dpr*页面缩放比)
个设备像素。
获取DPR的方法
-
js获取:
window.devicePixelRatio
。打开控制台,输入
window.devicePixelRatio
。就可以看到当前设备的DPR。切换手机视图,再次输入,可以看到模拟的手机视图的DPR。
上图中,第一个是PC端dpr,第二个是iPhoneX的dpr。 -
css媒体查询:
min-device-pixel-ratio
关于视口
这部分内容中的图借用一下思否中的一篇文章:关于移动端适配,你必须知道的
布局视口(layout viewport)
布局视口就是DOM的宽度。各浏览器默认的 layout viewport宽度一般都是800,980,1024等值。
js获取
document.documentElement.clientWidth
document.documentElement.clientHeight
视觉视口(visual viewport)
视觉视口是可见视口,在PC端&