在chrome打开一个网页按住Ctrl 和+号可以对网页进行缩放
以掘金为例
在css中，改变元素大小通常是transform的scale和zoom。
缩放是改变页面的zoom？
按照这个猜想，那zoom0.8 = ctrl - 80%
缩小的时候好像没有差异，那我们试试放大
放大两倍之后我们发现ctrl已经变成了h5端的适配，而zoom出现了滚动条。
（有兴趣的同学可以留意一下ctrl缩放的过渡，也可以发现这两个的区别）
结论：zoom != ctrl
于是我又猜想
缩放改变的是font-size?
这里我们先聊一下vh和vw的特点
1. vw和vh是前端开发中的一个动态单位，是一个相对于网页视口的单位。
2.系统会将视口的宽度和高度分为100份，1vw占用视口宽度的百分之一，1vh占用视口高度的百分之一。
3. vw、vh和百分比不同的是，百分比永远都是以父元素为参考，而vw、vh是以视口作为参
按照h5的rem适配方案，我们用屏幕宽度 / 16 可以动态适配移动端，那Ctrl改变的是html的font-size？
这里我们可以发现，
设置500px宽度的项跟随缩放改变了宽度
设置50vw宽度的项没有改变。
我们再来看一张图
这里我们发现font-size一直是12px，没有改变。
我们继续往下走
逻辑像素和视窗决定了font-size。
而浏览器中逻辑像素与物理像素是对应的。
因此我最终推断
Ctrl缩放改变的是视口大小，即改变的是viewport视口。
这里我们就解释了上面设置vw的元素没有被ctrl缩放影响: 缩放之后视口比例不变，因此div宽度不变。
在PC中，布局视口和可见视口都是同一个，那我们来看Ctrl是怎么影响布局视口。
这里我们引用一个大佬的科普文
即布局视口、视觉视口和理想视口
而在PC浏览器中布局视口和视觉视口都是同一个，因此我们不管是通过document.documentElement.clientWidth还是window.innerWidth获取的值都是相同的值。
最后真相大白：浏览器Ctrl缩放的是viewport视口。
文章引用：viewport深入理解和使用，vw\vh介绍
