viewport理解

参考：移动前端开发之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 均可以分别实现页面的适配，为何还要一块儿写？答案是一块儿写会更加严谨一点 - -！