我们知道，当把我们开发的pc端页面放在移动端展示，会出现布局错误。所以我们要做移动端适配，来让页面更合适。
我们来了解一些视口和缩放的相关概念。
pc端视口
在pc端，视口的默认宽度和浏览器窗口的宽度一致。在 css 标准文档中，pc端视口也被称为：初始包含块，它是所有 css 百分比宽度推算的根源，在pc端可通过如下几种方式获取宽度：
console.log('最干净的显示区域',document.documentElement.clientWidth);//常用
console.log('最干净的显示区域+滚动条',window.innerWidth);
console.log('最干净的显示区域+滚动条+浏览器边框',window.outerWidth);
console.log('与浏览器无关，当前设备显示分辨率横向的值',screen.width);
移动端视口
在移动端,浏览器厂商面临着一个比较大的问题,他们如何将数以万计甚至可以说是数以亿计的pc端网页完整的呈现在移动端设备上，并且不会出现横向滚动条呢？那就要引出移动端的三个概念：1.布局视口、2.视觉视口、3. 理想视口
布局视口
早期的时候我们这样做：pc端网页宽度一般都为：960px ~ 1024px 这个范围，就算超出了该范围，960px ~ 1024px这个区域也依然是版心的位置，浏览器厂商针对移动端设备设计了一个容器，先用这个容器去承装pc端的网页，这容器的宽度一般是980px，不同的设备可能有所差异，但相差并不大。
随后将这个容器等比例压缩到与手机等宽，这样就可以保证没有滚动条且能完整呈现页面，但是这样做依然有问题：网页内容被压缩的太小，严重影响用户体验。而且可能浏览器网页高度不够，手机会有留白。
移动端获取布局视口方式：document.documentElement.clientWidth
注意：布局视口经过压缩后，横向的宽度用css像素表达就不再是375px了，而是980px
视觉视口
视觉视口就是用户可见的区域，它的绝对宽度永远和设备屏幕一样宽，但是这个宽度里所包含的css像素值是变化的，例如：一般手机会将980个css像素放入视觉视口中，而ipad Pro会将1024个css像素放入视觉视口中。
移动端获取视觉视口方式：window.innerWidth，不过在Android2、Opera mini 、UC8 中无法正确获取。（一般不通过代码看视觉视口）
描述一下你的屏幕：
现在以iPhone6为例，我们描述一下屏幕（横向上）:
- 物理像素：750px
- 设备独立像素：375px
- css像素：980px
理想视口标准
与屏幕（设备独立像素）等宽的布局视口，称之为理想视口，所以也可以说理想视口是一种标准：让布局视口宽度 与 屏幕等宽（设备独立像素），靠meta标签实现。
理想视口的特点：
- 布局视口和屏幕等宽，以iPhone6为例，符合理想视口标准之后：设备独立像素：375px，布局视口宽度：375px。
- 用户不需要缩放、滚动就能看到网站的全部内容。
- 要为移动端设备单独设计一个移动端网站。
设置理想视口的具体方法：
<meta name="viewport" content="width=device-width" />
总结
不写meta标签（不符合理想视口标准）：
- 描述屏幕：物理像素：750px 、设备独立像素：375px、css像素：980px。
- 优点：元素在不同设备上，呈现效果几乎一样，因都是通过布局容器等比缩放的，例如200宽的盒子：200/980。
- 缺点：元素太小，页面文字不清楚，用户体验不好。 下面是等比缩放的效果图：即将网页放在980px的容器中，然后缩放放入不同的手机中。
写meta标签（符合理想视口标准）：
- 描述屏幕：物理像素：750px 、设备独立像素：375px、css像素：375px。
- 优点：
- 页面清晰展现，内容不再小到难以观察，用户体验较好。
- 更清晰的像素关系：布局视口 = 视觉视口 = 设备独立像素 = 375px。
- 更清晰的dpr，即dpr = 物理像素/设备独立像素 = 物理像素/css像素。 例如：dpr=2的设备，1 * 1 css像素 = 1 * 1 设备独立像素 = 2 * 2 物理像素
- 缺点：同一个元素，在不同屏幕（设备）上，呈现效果不一样，例如375宽的盒子： 375/375 和 375/414 (不是等比显示) 下面当我们在iphone6下设置一个375px的盒子刚好占满手机宽度。但是在iphone4下，会出现滚动条，iphone6plus下还有剩余空间。
- 解决缺点：做适配。
缩放
PC 端
放大时
- 视口变小
- 元素的 css 像素值不变，但一个css像素所占面积变大了。
缩小时
- 视口变大
- 元素的 css 像素值不变，但一个css像素所占面积变小了。
移动端
放大时
- 布局视口不变
- 视觉视口变小
缩小时
- 布局视口不变
- 视觉视口变大
注意：移动端缩放不会影响页面布局，因为缩放的时候，布局视口视口没有变化，简记：移动端的缩放没有改变布局视口的任何东西！
