视口理解:布局视口,视觉视口,理想视口

在pc端
默认宽度和浏览器窗口的宽度一致，在css标准文档中，
视口也被称为：初始包含块
是所有css百分比宽度推算的根源
可以理解成浏览器的屏幕是一个可变的盒子
例子：
全屏显示时宽度就是屏幕宽度，假设是1000
有一个盒子占宽20%则它的宽为200
如果把窗口拉到原来的一半，现在是500
则盒子占100，即宽为100

所以有时候看到浏览器在拉小时内容错位了，就是因为包容的容器盒子变化了

一些参考的值

显示区域 document.documentElement.clientWidth 常用
显示区域 + 滚动条 window.innerWidth
显示区域 + 滚动条 + 浏览器边框 window.outerWidth
与浏览器无关，当前设备显示分辨率横向的值 screen.width

移动端的视口概念

布局视口

也是理解成一个盒子，但和pc端不同的是，它是固定的，即不会变大变小。
浏览器厂商针对移动端设备设计了一个容器，
先用这个容器去承装pc网页，这个容器一般是980px，
移动端获取布局视口方式： document.documentElement.clientWidth，
布局视口经过压缩后，横向的宽度用css像素表达就不再是375px而是980px
因为布局视口是被压缩而不是截取
也就是说
一个在电脑上的网页宽度等比的缩放到移动端的浏览器中

视觉视口

用户可见的区域，绝对宽度永远和设备屏幕一样宽
怎么理解呢
布局视口就像是在显微镜下的观察器皿，里面的元素就是各种被观察物
而视觉视口正是显微镜
一直只有那么点地方给我们看，但是我们可以放大缩小
正因为观察器皿没有变化，所以观察物不会被移动
这就是移动端元素不会因为放大缩小错位的原因

理想视口

关键是下面这行

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

参数介绍
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

没有设置为非标准理想视口
优点：不同设备呈现效果几乎一样，因为是通过布局容器等比缩放的
缺点：元素太小，页面文字不清楚，用户体验不好
就是上面介绍的等比缩放过来的页面

设置了符合理想视口标准
优点：页面清晰展现，内容不再小到难以观察，用户体验较好
缺点：同一个元素不同屏幕（设备）呈现效果不一样
解决：做适配
屏幕适配方案

两者的缩放

pc端缩放

放大时

视口变小，原来是1000，缩放到125%（放大），变为800
原来一行能容纳5个200的盒子
现在会有一个被挤到下一行
元素css像素值不变，但一个css像素所占面积变大了

缩小时

视口变大，原来是1000，缩放到80%（缩小)，变为1250
同理分析

移动端

放大时

布局视口不变（培养皿）
视觉视口变小（高倍镜，视野变窄）

缩小时

布局视口不变（培养皿）
视觉视口变大（低倍镜，视野变宽）

移动端缩放不影响页面布局，因为缩放的时候，布局视口大小没有变化