## 概述 经过分析我们得到,移动页面最理想的状态是,避免滚动条且不被默认缩放处理,我们可以通过设置 ``` <meta name="viewport" content=""> //此设置只会在移动端起作用 ``` 来进行控制,并改变浏览器默认的layout viewport 的宽度. ## 设置viewport 对viewport设置的meta建议写在已有的meta标之后. ``` //但是这里一般都设置为device-width <meta name="viewport" content="width=375"> //注意,这里没有单位,因为这个是独立像素. ``` ## initial-scale属性 当我们设置initial-scale=1的时候,发现也达到了width=device-width的作用.当设置为1的时候,相当于设置了layout-viewport等于ideal-viewport .为了兼容性,一般两个都进行设置. ``` initial-scale = ideal viewport / layout viewport ``` ## maximum-scale 设置最大的缩放比例. ## minimum-scale 设置默认状态下最小缩放比例. ## user-scaleable 设置是否允许用户进行缩放. ## 避免滚动 盒子宽度不要设置具体的值,设置成百分比. ## 总结 所以一般在移动端设置viewport 的时候进行如下设置. 快捷键 meta:vp ``` <meta name="viewport" content="width=device-width, initial-scale=1"> ```