前端面试之移动端适配篇

关于像素，括号中为别名

设备像素（物理像素）

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的方法

1. js获取：window.devicePixelRatio。

   打开控制台，输入window.devicePixelRatio。就可以看到当前设备的DPR。切换手机视图，再次输入，可以看到模拟的手机视图的DPR。
   
   上图中，第一个是PC端dpr，第二个是iPhoneX的dpr。

2. css媒体查询：min-device-pixel-ratio

关于视口

这部分内容中的图借用一下思否中的一篇文章：关于移动端适配，你必须知道的

布局视口（layout viewport）

布局视口就是DOM的宽度。各浏览器默认的 layout viewport宽度一般都是800，980，1024等值。

js获取

document.documentElement.clientWidth

document.documentElement.clientHeight

视觉视口(visual viewport)

视觉视口是可见视口，在PC端，浏览器窗口可以调整，视觉窗口等于整个浏览器的宽度，而在移动端，浏览器不能缩放，因此视觉视口即为屏幕的宽度。