22
2020
11

meta viewport 是做什么的?怎么写?

移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面,这个虚拟窗口就是viewport,目的是正常展示没有做移动端适配的网页,可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条,这里可显示区域的宽度就是viewport的宽度。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的,是否允许用户手动播放根据网站的需求来定,但把width设为width-device基本是必须的,这样能保证不会出现横向滚动条。


meta viewport 的6个属性:

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

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

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

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

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

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

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。