viewport理解

Posted 2020-10-07 HelloHello233

参考：移动前端开发之viewport的深入理解

对以上的文章中的知识点，感觉换另一个角度更好理解一点记录如下：

viewport（视觉窗口）是仅存在于移动web中的一个虚拟容器，用于承载页面，大部分的viewport宽度都是980px，而且这个容器具备 伸缩性 ，可以通过viewport来设置是否允许用户去缩放页面

 

屏幕的像素密度：区域像素点总数 / 区域大小

css中的1px显示在像素密度高的屏幕上时，所占据的像素点要多，之所以要这样是因为可以保证，无论在什么分辨率的手机上显示css的1px时，都能保证视觉距离是一致的。

缩/放屏幕时，css中的px所占据的屏幕像素点也会在原来的基础上按照倍数来进行减少/增加

 

默认情况下（没有设置viewport属性），移动设备上浏览器默认的viewport宽度为980px或1024px【视浏览器类型而定】，这个宽度可以通过以下代码来获取

document.documentElement.clientWidth

但如果设置了viewport的宽度为设备的宽度

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

则以上api获取出来的，就是手机屏幕的宽度了。

 

对页面的渲染过程，可以这么理解：

　　把页面渲染到一个viewport上，这个容器中的1px与css的1px是一一对应的

　　对于PC浏览器来说，页面直接渲染到浏览器上，根本没有viewport这个概念，浏览器有多大，页面的渲染环境就多大。

　　对于移动端的浏览器来说，会相对于PC的渲染过程多出来一个步骤，页面渲染到viewport（宽度为980px或者1024px）上之后，会等比例缩放这个viewport容器（缩放比例为980px|1024px / 手机屏幕的宽度），来适应显示到手机屏幕上。这就是为什么，默认情况下，一个页面可以在PC上正常显示，但是到了手机上显示，全部东西就都缩小了，如下：

当页面应用了这一句（将移动端的宽度设置为手机屏幕宽度），这样显示到手机屏幕上时，就不需要缩放了，因为viewport容器的宽度和设备的宽度已经一样了

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

效果如下：

在移动端中，当viewport不再缩放（viewport宽度与设备宽度一致），而且PC中浏览器的大小（对页面的渲染环境）也与手机设备的viewport宽度一致时，手机和PC对于同一个页面的显示效果是一致的（根本原因是因为同一个页面的渲染宽度一样，渲染的结果当然也一样）：

 

 以上只是通过设置宽度来使缩放比例为1，以达到不缩放的效果。

 实际上还有另一种方式，可以直接设置缩放比例为1，运行效果和上面的一致

<meta name="viewport" content="initial-scale=1">

这里也可以这么理解：虽然设置的是缩放比，但本质上设置的还是viewport的宽度，实际设置的宽度width = device-width / initaial-scale .

总结：width设置的viewport的大小，而scale用于设置viewport的缩放比例【值为1时，等比例缩放viewport容器的尺寸，但内部的内容尺寸不变，直到viewport的宽度等于手机屏幕的宽度】，两个设置可以同时指定。

 

对于动态设置meta标签：什么方式都可以，什么时候修改或者添加完成，都会立即生效。

标准的移动适配设置：

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

 这里可能有个疑问，scale=1 和 width=device-width 都可以分别实现页面的适配，为什么还要一起写？答案是一起写会更加严谨一点 - -！