移动开发时,一般都会在头部加载这样一行meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
这一行什么意思呢?
viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。width=device-width表示当前的viewpoint等于设备的宽度,width用来设置layout viewport的宽度,height用来设置layout viewport的高度。initial-scale=1.0表示页面的初始缩放值为1,maximum-scale允许用户的最大缩放值,minimum-scale允许用户的最小缩放值,user-scalable表示是否允许用户缩放,“no”不允许,“yes”允许。
关于缩放
缩放指的是相对于ideal viewport来进行的,比如<meta name="viewport" content="width=500, initial-scale=1">,width=500表示把当前的viewport宽度设为500,initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度,浏览器该怎么办呢,一般会取较大的那个值。