2.1、viewport - 可视区
最初手机端需要照顾 PC 端,如果不设置 viewport,直接访问网页的时候,我们发现网页内容看着很小,这是因为页面按照PC端最小宽度980展示的,也就是我们的网页宽度就是980,而手机屏幕宽度通常375、411、320、414等,没有980那么大,所以页面被缩小了很多。
设置viewport
<meta name=“viewport”
content="width=device-width,
initial-scale=1.0,
user-scalable=no,
minimum-scale=1.0
maximum-scale=1.0"
/>
分别对 meta 的各个属性介绍如下:
-
width - 设置viewport的宽度,为一个正整数,或字符串‘device-width’
-
initial-scale - 设置页面的初始缩放值,是一个数字,可以是小数
-
maximum-sacle - 设置页面最大缩放值,是一个数字,可以是小数
-
user-scalable - 是否允许用户进行缩放,值为’yes’或者’no’,yes表示可缩放,no表示禁止缩放
-
minimum-scale - 允许用户缩放的最小值,是一个数字,可以是小数
-
height - 设置layout viewport的高度,这个属性很少使用
一般情况下禁止用户缩放网页