viewport

在网页设计时我们经常会使用各种框架，比如Bootstrap框架，本以为能直接适配手机端，但是还是出了问题，下面是用bootstrap写的。

电脑端如下

image

本想的手机端应该为如下（而且电脑端浏览器屏幕缩小也会折叠菜单的）

image

但用谷歌开发者工具查看手机端适配时，如下

image

菜单并没有折叠，与预期中不一样，而且字还特别小，感觉应该没有问题，因为宽度是按百分比设置的，在查看元素时，才看到元素的宽度为980px，但我并没有设置这样的宽度，网上查了查，才知道手机设备的浏览器会为了提高分辨率，会自己设置可视区域的宽度，如下

image

所以这个是浏览器自己设置的。

这是我们就要引入viewport（浏览器可视区域）了，下面是viewport的一些属性。

width                         设置layout viewport 的宽度，为一个正整数，或字符串"width-device"

initial-scale              设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale        允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale       允许用户的最大缩放值，为一个数字，可以带小数

height                        设置layout viewport的高度，这个属性对我们并不重要，很少使用

user-scalable是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

在上面这个网页我们应该设置如下

image

宽度为设备的宽度，初始页面不缩放

然后手机端就变成了

image

本文章仅限于个人学习所用，希望能对你起到帮助