在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。
关于这篇文章说到的所有知识，本质上离不开以下代码
<meta content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> @media all and (max-width: 320px) { // do something }
了解过移动端开发的朋友，其实对以上的代码就不会陌生。上面的代码，主要涉及到meta视口标签与媒体查询。单单以上简短的代码就需要明白：
像素(pixel)
视口(viewport)
分辨率(resolution)
meta视口标签
媒体查询(media query)
JavaScript相关的属性和方法
如何实现移动端响应式适配的问题
那就进入主题吧：）
像素
在移动端上，所谓的像素分为两种
CSS像素：CSS像素就是我们在编写CSS代码时的像素。
设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
1个CSS像素等于多少个设备像素取决于屏幕特性(是否是高清屏)和用户缩放的比例。当用户将屏幕从100%放大到200%时，1个CSS像素等于2个设备像素，反之相反；当屏幕为Retina高清屏(如iPhone6，dpr=2)时，1个CSS像素就等于2个设备像素，反之相反。
需要明白一点的是，2个设备像素并不是说它扩大了两倍，而是说在页面上仍然显示的是1px(1个CSS像素)，但是这1px是由2个设备像素组成。像素点变多了，因此图像会变得更加清晰。下面这幅图大致说明了CSS像素和设备像素的区别。
视口
在移动端上，存在三种不同的视口。
布局视口：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕。在移动端，默认情况下，布局视口等于浏览器窗口宽度。布局视口限制了CSS的布局。在JavaScirpt上获取布局视口的宽度可以通过document.documentElement.clientWidth | document.body.clientWidth得到。
视觉视口：视觉视口是用户正在看到的区域。用户可以缩放来操作视觉视口，而不影响视觉视口的宽度。视觉视口决定了用户看到了什么。在JavaScript上获取视觉视口的宽度可以通过`window.innerWidth得到。
在PC端上，视觉视口等于布局视口的宽度，无论用户是放大屏幕还是缩小屏幕，这两个视口的宽度仍然相等。但是，在移动端上，并非如此。缩放屏幕的过程实质上就是CSS像素缩放的过程。当用户将屏幕放到到两倍时，视觉视口变小了(因为视觉视口中CSS像素变少了)，而每单位的CSS像素却变大了，因此1px(1个CSS像素)等于2个设备像素。同理，当为iPhone6(dpr=2)时，视觉视口中CSS像素变少了，但是1px等于2个设备像素。当用户缩小屏幕时也是同样的道理。缩放的过程并不会影响布局视口的大小。
也就是说，高清屏(dpr>=2)或屏幕放大时，视觉视口变小(CSS像素变少)，每单位的CSS像素等于更多的设备像素；非高清屏(dpr<2)
或屏幕缩小时，视觉视口变大(CSS像素变多)，每单位的CSS像素等于更少的设备像素。
但是无论放大或缩小屏幕，布局视口的宽度仍然保持不变。
理想视口：由于默认情况下布局视口等于浏览器窗口宽度，因此在移动端上需要通过放大或缩小视觉视口来查看页面内容，这当然体验糟糕啊！因此在移动端引入了理想视口的概念。理想视口的出现必须需要设置meta视口标签，此时布局视口等于理想视口的宽度。常见的，iPhone6的理想视口为375px * 667px，iPhon6 plus的理想视口为414px * 736px。在JavaScript上获取视觉视口的宽度window.screen.width得到。
<meta content="width=device-width" />
当设置了meta视口标签之后，iPhone6的布局视口宽度将等于375px，iPhone6plus布局视口的宽度等于414px。其他移动设备相似。
理想视口会随着屏幕的旋转而改变。当iPhone6为肖像模式时(即竖屏)，此时理想视口为375px * 667px；但为横屏模式时，此时理想视口为667px * 375px。
分辨率与设备像素比
分辨率是指每英寸内点的个数，单位是dpi或者dppx。设备像素比是指设备像素与理想视口宽度的比值，没有单位。
分辨率在CSS上可以通过resolution属性设置。一般情况下会使用dpi作为分辨率的单位，因为dppx并非所有浏览器都支持。
而设备像素比在CSS上可以通过device-device-pixel-ratio属性设置，而在JavaScript上可以通过window.devicePixelRatio属性获取。