在网页设计时我们经常会使用各种框架，比如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
本文章仅限于个人学习所用，希望能对你起到帮助
网友评论