视口元标记
本文介绍了如何使用“视口”<meta> 标记来控制视口的大小和形状。
背景
浏览器的视口是窗口中可以查看 Web 内容的区域。这通常与渲染的页面大小不同，在这种情况下，浏览器会为用户提供滚动条以滚动并访问所有内容。
一些移动设备和其他窄屏幕设备在虚拟窗口或视口中渲染页面，该视口通常比屏幕宽，然后缩小渲染结果，以便可以一次看到所有内容。然后，用户可以缩放和平移以更仔细地查看页面的不同区域。例如，如果移动屏幕的宽度为 640px，则页面可能会以 980px 的虚拟视口进行渲染，然后将其缩小以适合 640px 的空间。
这样做是因为并非所有页面都针对移动设备进行了优化，并且在以较小的视口宽度渲染时会中断（或至少看起来很糟糕）。此虚拟视口是一种使非移动设备优化网站在窄屏幕设备上看起来更好的方法。
但是，这种机制对于使用媒体查询针对窄屏幕进行了优化的页面来说并不是很好——例如，如果虚拟视口为 980px，则在 640px 或 480px 或更小处触发的媒体查询将永远不会使用，从而限制了此类响应式设计技术的有效性。视口<meta> 元素减轻了窄屏幕设备上虚拟视口的问题。
视口基础
一个典型的移动设备优化网站包含如下内容
<meta name="viewport" content="width=device-width, initial-scale=1" />
并非所有设备的宽度都相同；您应该确保您的页面在各种屏幕尺寸和方向下都能正常工作。
“视口”<meta> 元素的基本属性包括
width-
控制视口（最小）大小（请参阅视口宽度和屏幕宽度）。它可以设置为特定的像素数，例如
width=600，也可以设置为特殊值device-width，即设备屏幕以 CSS 像素表示的物理尺寸。此值建立了vw单位的值。最小值：1。最大值：10000。负值：忽略。 height-
控制视口（最小）大小（请参阅视口宽度和屏幕宽度）。它可以设置为特定的像素数，例如
height=400，也可以设置为特殊值device-height，即设备屏幕以 CSS 像素表示的物理尺寸。此值建立了vh单位的值。最小值：1。最大值：10000。负值：忽略。 initial-scale-
控制页面首次加载时的缩放级别。最小值：
0.1。最大值：10。默认值：1。负值：忽略。 minimum-scale-
控制页面上允许的缩小程度。最小值：
0.1。最大值：10。默认值：0.1。负值：忽略。 maximum-scale-
控制页面上允许的放大程度。任何小于 3 的值都会导致无障碍访问失败。最小值：
0.1。最大值：10。默认值：10。负值：忽略。 user-scalable-
控制是否允许在页面上进行放大和缩小操作。有效值：
0、1、yes或no。默认值：1，与yes相同。将值设置为0（与no相同）违反了 Web 内容无障碍指南 (WCAG)。 interactive-widget-
指定交互式 UI 小部件（如虚拟键盘）对页面视口的影响。有效值：
resizes-visual、resizes-content或overlays-content。默认值：resizes-visual。
警告： 使用user-scalable=no 可能会导致视力障碍用户（如低视力用户）遇到无障碍访问问题。WCAG 要求至少 2 倍缩放；但是，最佳实践是启用 5 倍缩放。
屏幕密度
屏幕分辨率已上升到人眼无法区分单个像素的程度。例如，智能手机通常具有分辨率高达 1920-1080 像素（≈400dpi）的小屏幕。因此，许多浏览器可以通过为每个 CSS“像素”转换多个硬件像素来以较小的物理尺寸显示其页面。最初，这在许多触控优化网站上导致了可用性和可读性问题。
在高 dpi 屏幕上，具有initial-scale=1 的页面将由浏览器有效地缩放。它们的文本将平滑清晰，但它们的位图图像可能无法利用完整的屏幕分辨率。为了在这些屏幕上获得更清晰的图像，Web 开发人员可能希望以高于其最终尺寸的比例设计图像——或整个布局——然后使用 CSS 或视口属性将其缩小。
默认像素比例取决于显示屏密度。在密度低于 200dpi 的显示屏上，比例为 1.0。在密度介于 200 和 300dpi 之间的显示屏上，比例为 1.5。对于密度超过 300dpi 的显示屏，比例为整数向下取整 (density/150dpi)。请注意，默认比例仅在视口缩放比例等于 1 时才有效。否则，CSS 像素和设备像素之间的关系取决于当前缩放级别。
视口宽度和屏幕宽度
网站可以将其视口设置为特定大小。例如，定义 "width=320, initial-scale=1" 可用于精确地适应纵向模式下的小型手机显示屏。当浏览器以更大尺寸呈现页面时，这可能会导致问题。为了解决此问题，浏览器将在必要时扩展视口宽度以在请求的缩放比例下填充屏幕。这在大型屏幕设备上特别有用。
对于设置初始或最大缩放比例的页面，这意味着 width 属性实际上转换为最小视口宽度。例如，如果您的布局需要至少 500 像素的宽度，则可以使用以下标记。当屏幕宽度超过 500 像素时，浏览器将扩展视口（而不是放大）以适应屏幕。
<meta name="viewport" content="width=500, initial-scale=1" />
其他可用的属性包括 minimum-scale、maximum-scale 和 user-scalable。这些属性会影响初始缩放比例和宽度，以及限制缩放级别的变化。
交互式 UI 小部件的影响
浏览器的交互式 UI 小部件可能会影响页面视口的大小。最常见的此类 UI 小部件是虚拟键盘。要控制浏览器应使用哪种调整大小行为，请设置 interactive-widget 属性。
允许的值为
resizes-visual-
交互式小部件会调整视觉视口的大小。
resizes-content-
交互式小部件会调整视口的大小。
overlays-content
移动设备和平板电脑的常见视口尺寸
如果您想知道哪些移动设备和平板电脑具有哪些视口宽度，这里有一个移动设备和平板电脑视口大小的综合列表。此列表提供了诸如纵向和横向模式下的视口宽度、物理屏幕尺寸、操作系统以及设备像素密度等信息。
规范
| 规范 |
|---|
| CSS 视口模块级别 1 # viewport-meta |