视口

浅谈视口

视口：即虚拟容器

目的：使pc端的网站放到手机端，自适应宽度。

把一个pc端的网站放到手机端分为两步：

1）把电脑的网站放到虚拟容器中，这个虚拟容器的宽度是980px，这个980是人为规定的，手机在出厂时就设置好的。

如果电脑端的网站整体宽度也是980px就会正好放到这个虚拟容器。

如果电脑端的网站宽度大于980，你的网站在这个虚拟容器中就会产生一个水平滚动条。

如果电脑端的网站宽度小于980px，这个虚拟容器也可以放下。

2）第二步，就是把这个虚拟容器放到手机里 

如果手机的宽度也是980，正好把这个虚拟容器放下。

不幸的是，手机的宽度在出厂时，也是设置死的。如：iphone6/7/8宽度是375如果iphone5宽度是320，如iphone6/7/8plus它的宽度是414....  安卓手机在出厂时，也规定死了一个宽度。

那么把一个980的虚拟容器放到一个300 400 500 左右的手机里，此时，这个虚拟容器就会被压缩，页面上的每一个盒子也会被压缩。

如果不想让盒子被压缩，那么就需要设置虚拟器的大小。如果设置成和手机的宽度一样的，这样，这个盒子在所有的手机都不会压缩了。

layout viewport:
        手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度

        布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。
        可以通过document.documentElement.clientWidth来获取 ，在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，因为我们横向的布局都是按初始包含块开始填的，在移动端一样，不过我们这个时候应该叫它布局视口。

visual viewport:
        视觉视口与设备屏幕一样宽，并且它的css像素的数量会随用户的缩放而改变
       visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

 设置视口的代码：

<meta name="viewport" content="width=device-width">

相关参数：

属性名	取值	描述
width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素，一般不用b
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义放大最大比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义缩小最小比例，它必须大于或等于minimum-scale设置
user-scalable	yes / no	定义是否允许用户手动缩放页面，默认值 yes