viewport meta标签的作用

来源:互联网 发布:xp系统网络连接错误691 编辑:程序博客网 时间:2024/04/28 11:33

       当我们使用手机浏览器浏览一个适合PC端浏览的页面时,浏览器会将网页的内容放至一个虚拟的窗口(通常称之为viewport),可以让用户改变可见网页内容的大小。如下面图示:

        

       使用viewportmeta标签可以很方便地在不同屏幕尺寸的手机上对内容布局和显示的控制,通常针对移动网页设计的页面viewport meta标签如下:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">


下面是对viewport的属性的解释:

width

控制viewport的大小,可指定特殊值,如:device-width

height

同width

initial-scale

初始缩放比例

maximum-scale

允许用户缩放到的最大比例

minimum-scale

允许用户缩放到的最小比例

user-scale

1为允许用户手动缩放,0反之