讲讲viewport和移动端布局

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

width: 控制viewport的大小，可以是一个指定的值，或者是特殊值，如device-width是为设备指定的宽度。

height： 和width相对应，指定高度

initial-scale： 初始缩放比例，也是当前页面第一次load的时候缩放的比例。

maximum-scale： 允许用户缩放的最大比例。

minimum-scale： 允许用户缩放的最小比例。

user-scalable： 用户是否可以手动缩放。

关于移动端布局，有三个viewport需要了解，这三个viewport的出现是为了解决网页完美适配移动端屏幕的问题

1. layout viewport：布局视图

   layout viewport就是用于css布局的一个viewport，关于这个viewport，各家浏览器厂商会默认设置一个值，譬如 就设置了980px的默认值，所以默认的 的宽度就是980px，这也就是html的width(当然，此时若某一个子元素宽度超过这个宽度也可以强行撑大布局，但是html的宽度还是不变，其他子元素的布局还是按html的宽度进行布局，只有超出的那个特殊情况，例如在设置width=device-width，initial-scale=1时，本来应该是不会出现水平滚动条的，此时就按照屏幕完美显示，但是如果此时某一个div的宽度设为500px，那么就出现了水平滚动条，但是html还是device-width那么宽)

   当不设置viewport标签时，页面在移动端的显示就相当于此时layout viewport的宽度就是默认值（eg：980px），visual viewport的宽度应该是一个比layout viewport稍大的值（应该是只有在这种情况下visual viewport的值才会比layout viewport的值大，其他情况下layout viewport的值均大于等于visual viewport的大小）

   width=device-width设置的就是layout viewport

2. visual viewport：可视视口

   visual viewport首先与手机设备有关，其次，即使是同一台设备，其visual viewport也不是一成不变的，其宽度是等于device-width/scale的，也就是说缩放值越大，visual viewport宽度就越小，因为当放大时，一个逻辑像素对应的物理像素就多了，相当于此时改变的是DPR，而一屏的物理像素是固定的，那么一屏所表示的逻辑像素就减小了，也就是visual viewport宽度变小了。对于initial-scale的设置就是对visual viewport的设置

3. ideal viewport：理想视口，这个其实作用不大，当布局视口等于可视视口等于设备的宽度时就是理想视口了。