<meta name="viewport">
<meta> 元素的 name
属性的 viewport
值提供了有关 视口 应如何调整大小的提示。
如果指定,你可以使用 <meta> 元素中的 content
属性,以逗号分隔的一个或多个值列表来定义与视口相关的行为。
用法说明
<meta name="viewport"> 元素具有以下附加属性
content
-
必须定义
content
属性,其值设置了各种与视口相关的行为。其值是以逗号分隔的一个或多个键值对列表,格式为key=value
。定义了以下键:width
-
控制视口的(最小)像素宽度(请参阅视口宽度和屏幕宽度)。它可以设置为 1 到 10000 之间的正整数像素值(例如
width=600
),或者特殊值device-width
,即设备屏幕的 CSS 像素物理尺寸。此值确立了vw
单位的值。 height
-
控制视口的(最小)像素高度(请参阅视口宽度和屏幕宽度)。它可以设置为 1 到 10000 之间的正整数像素值(例如
height=400
),或者特殊值device-height
,即设备屏幕的 CSS 像素物理尺寸。此值确立了vh
单位的值。 initial-scale
-
定义设备宽度(在纵向模式下为
device-width
,在横向模式下为device-height
)与视口大小之间的比率。它可以是介于0.0
和10.0
之间的一个数字。 maximum-scale
-
定义最大缩放量。它必须大于或等于
minimum-scale
,否则行为未定义。浏览器设置可能会忽略此规则,iOS10+ 默认忽略此规则。它可以是0.0
到10.0
之间的一个数字。 minimum-scale
-
定义最小缩放级别。它必须小于或等于
maximum-scale
,否则行为未定义。浏览器设置可能会忽略此规则,iOS10+ 默认忽略此规则。它可以是0.0
到10.0
之间的一个数字。 user-scalable
-
一个布尔值,指示用户是否可以缩放网页。浏览器设置可能会忽略此规则,iOS10+ 默认忽略此规则。它可以是
yes
或no
,默认为yes
。警告:通过将
user-scalable
设置为no
来禁用缩放功能会阻止视力低下的人阅读和理解页面内容。此外,WCAG 要求至少 2 倍缩放;然而,最佳实践是启用 5 倍缩放。欲了解更多信息,请参阅: interactive-widget
-
指定交互式 UI 小部件(例如虚拟键盘)对页面视口的影响。它可以是关键字
resizes-visual
、resizes-content
或overlays-content
。 viewport-fit
-
定义网页的可视部分。它可以是关键字
auto
、contain
或cover
之一。auto
:不影响初始布局视口,整个网页可见。contain
:视口被缩放以适应显示器内最大内接矩形。cover
:视口被缩放以填充设备显示。强烈建议使用 安全区域插入变量,以确保重要内容不会超出显示范围。
视口宽度和屏幕宽度
浏览器的视口是窗口中可以查看网页内容的区域。在布局页面内容之前需要计算视口大小——页面可能会溢出视口,在这种情况下,浏览器会提供滚动条供用户滚动以访问所有内容,但视口大小是内容应该适应多少空间,尤其是水平方向空间的指导方针。
一些移动设备和其他窄屏幕设备会在一个比屏幕宽的虚拟窗口或视口中渲染页面,然后将渲染结果缩小以适应屏幕尺寸。用户可以随后缩放和平移以更仔细地查看页面的不同区域。例如,如果一个移动屏幕的宽度为 640 像素,页面可能会在一个 980 像素的虚拟视口中渲染,然后它将被缩小以适应 640 像素的空间。这样做是因为并非所有页面都针对移动设备进行了优化,并且在小视口宽度下渲染时会崩溃(或者至少看起来很糟糕)。这个虚拟视口是一种让非移动设备优化网站在窄屏幕设备上看起来更好的方法。然而,对于使用媒体查询针对窄屏幕进行优化的页面来说,这种机制就不那么好——例如,如果虚拟视口是 980 像素,那么在 640 像素或 480 像素或更小尺寸时触发的媒体查询将永远不会被使用,从而限制了此类响应式设计技术的有效性。视口 <meta>
元素缓解了窄屏幕设备上虚拟视口的问题。
最常见的设置如下,它将视口设置为匹配设备的宽度,并以 100% 缩放显示内容:
<meta name="viewport" content="width=device-width, initial-scale=1" />
网站可以将视口设置为特定大小。例如,定义 "width=320, initial-scale=1"
可用于在纵向模式下精确适应小型手机显示屏。当浏览器以较大尺寸渲染页面时,这可能会导致问题。为了解决这个问题,浏览器会在必要时扩展视口宽度,以在请求的缩放比例下填充屏幕。这在大型屏幕设备上特别有用。
对于设置了初始或最大缩放的页面,这意味着 width
属性实际上会转换为一个最小视口宽度。例如,如果你的布局至少需要 500 像素的宽度,那么你可以使用以下标记。当屏幕宽度超过 500 像素时,浏览器会扩展视口(而不是放大)以适应屏幕:
<meta name="viewport" content="width=500, initial-scale=1" />
屏幕密度
屏幕分辨率已提高到人眼无法分辨单个像素的程度。例如,智能手机通常具有分辨率高达 1920×1080 像素(约 400dpi)的小屏幕。因此,许多浏览器可以通过将多个硬件像素转换为每个 CSS“像素”来以较小的物理尺寸显示页面。最初,这在许多针对触摸优化的网站上造成了可用性和可读性问题。
在高 DPI 屏幕上,initial-scale=1
的页面实际上会被浏览器放大。它们的文本会平滑清晰,但它们的位图图像可能无法充分利用屏幕分辨率。为了在这些屏幕上获得更清晰的图像,网页开发者可能希望以高于其最终尺寸的比例设计图像——或整个布局——然后使用 CSS 或视口属性将它们缩小。
默认像素比取决于显示密度。在密度小于 200dpi 的显示器上,比例为 1.0。在密度介于 200 到 300dpi 之间的显示器上,比例为 1.5。对于密度超过 300dpi 的显示器,比例为整数下限(密度/150dpi)。请注意,默认比例仅在视口比例等于 1 时成立。否则,CSS 像素与设备像素之间的关系取决于当前缩放级别。
示例
使用 meta 视口大小
以下示例指示浏览器页面应以设备宽度呈现:
<meta name="viewport" content="width=device-width" />
将媒体查询与视口元标签一起使用
以下 content
值使用了多个关键字,提示浏览器使用全屏模式,并结合了 viewport-fit
,这有助于避免移动设备刘海等显示切口:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
交互式 UI 小部件的影响
浏览器的交互式 UI 小部件会影响页面视口的大小。最常见的此类 UI 小部件是虚拟键盘。要控制浏览器应使用哪种调整大小行为,请设置 interactive-widget
属性。
默认情况下,虚拟键盘只会调整视觉视口的大小,这不会影响页面布局。你可以通过将 interactive-widget
属性设置为 resizes-content
来使页面布局适应虚拟键盘的出现:
<meta name="viewport" content="interactive-widget=resizes-content" />
规范
此特性似乎未在任何规范中定义。浏览器兼容性
加载中…
另见
- 视口词汇表术语
- 为 Chrome 安卓版即将推出的视口调整大小行为变化做准备,来自 developer.chrome.com
- 适用于响应式体验的移动视口,来自 Adobe Experience League