彻底理解 Meta 标签中的 viewport 属性、含义及作用
viewport 属性是什么?有哪些作用?
浏览器的视口是一个在其中查看 Web
内容的窗口区域。这通常与渲染的页面大小不同,在这种情况下,浏览器为用户提供滚动条以滚动和访问所有内容。
简单理解:手机浏览器是把页面放在一个虚拟的“窗口”(
viewport
)中,通常这个虚拟的“窗口”(viewport
)比屏幕宽。在移动设备和其他窄屏设备中,某些内容在比普通屏幕更宽的虚拟窗口或视口中渲染页面,然后缩小渲染的结果,以便可以一次看到所有内容。然后,用户可以通过平移和缩放以查看页面的不同区域。例如,如果移动屏幕的宽度为640px
,则页面可能会使用980px
的虚拟视口渲染,然后页面将缩小以适应640px
的空间。
这是因为并非所有页面都针对移动设备进行了优化,并且在以较小的视口宽度渲染时会被截断(或至少看起来很糟糕)。虚拟视口则是一种使非移动设备优化页面在窄屏设备上看起来更好的一个方法。
移动版的
Safari
浏览器最新引进了viewport
这个meta tag
,让网页开发者来控制viewport
的大小和缩放,其他手机浏览器也基本支持。
viewport 相关属性
width
控制视口的大小。这可以设置为特定像素数(如’width=600
’),也可以设置为特殊值device-width
,即100vw
,100%
的视口宽度。最小值为1
。最大值为10000
。负值会被忽略。height
控制视口的大小。这可以设置为特定像素数(如height=600
),也可以设置为特殊值device-height
,即100vh
,100%
的视口高度。最小值为1
。最大值为10000
。负值会被忽略。initial-scale
控制页面首次加载时显示的缩放倍数。最小值是0.1
。最大值是10
。默认值为1
。负值会被忽略。minimum-scale
控制页面允许缩小的倍数。最小值是0.1
。最大值是10
。默认值为1
。负值会被忽略。maximum-scale
控制页面允许放大的倍数。最小值是0.1
。最大值是10
。默认值为1
。负值会被忽略。user-scalable
控制是否允许页面上的放大和缩小操作。有效值为0、1、yes 或 no
。默认值为1
,与yes
相同。interactive-widget
指定交互式UI
组件(如虚拟键盘)对页面视口的影响。有效值:resizes-visual
、resizes-content
或overlays-content
。默认值:resizes-visual
。
- 注意:当
width
和initial-scale
同时出现
当二者同时出现且<meta name="viewport" content="width=980, initial-scale=1.0">
width
的值不是device-width
时,浏览器会取两个中值最大的那个。(例如 width=980,idea viewport的宽是1024,则浏览器取idea viewport的宽。相反则取width的值)。
但是以上几种情况都会有极个别的小缺陷,就是某些移动设备的横屏、竖屏不分。于是就有了一种写法。<meta name="viewport" content="width=device-width, initial-scale=1.0">