六，前端---viewport

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，再具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域小。

这里需要注意三点：

（1）：浏览器的默认的viewport叫做layout viewport，这个宽度可以通过document.documentElement.clientWidth来获取。

（2）：然而layout viewport的宽度是大于浏览器的可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，我们叫它visual viewport。visual viewport的宽度可以通过window.innerWidth来获取。

（3）：目前越来越多的网站都会为移动设备进行单独设计，所以必须有一个能够完美适配移动设备的viewport，这就需要第三个viewport---移动设备的理想viewport（ideal viewport）。

总结：ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度（单位用px），那么这个元素的宽度就是设备屏幕的宽度，也就是宽度为100%的效果。

利用meta标签对viewport进行控制

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width=device-width表示此宽度不依赖于原始像素（px），而依赖于屏幕宽度。所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iPhone和iPad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

注：

rem是css3新增的一个相对单位，也是em的升级版，因为rem相对的只是html根元素，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。