视口元标记

¥Background

浏览器的 viewport 是可以看到网页内容的窗口区域。这通常与呈现的页面大小不同，在这种情况下，浏览器会提供滚动条供用户滚动并访问所有内容。

¥The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.

某些移动设备和其他窄屏幕在虚拟窗口或视口中渲染页面（通常比屏幕宽），然后缩小渲染结果，以便一次可以看到所有内容。然后，用户可以缩放和平移以更仔细地查看页面的不同区域。例如，如果移动屏幕的宽度为 640 像素，则页面可能会使用 980 像素的虚拟视口进行渲染，然后它将缩小以适应 640 像素的空间。

¥Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then zoom and pan to look more closely at different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

这样做是因为并非所有页面都针对移动设备进行了优化，并且在以小视口宽度渲染时会损坏（或至少看起来很糟糕）。这种虚拟视口是一种使非移动优化网站在窄屏幕设备上看起来更好的方法。

¥This is done because not all pages are optimized for mobile and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.

然而，这种机制对于使用 媒体查询 针对窄屏幕进行优化的页面不太好 - 例如，如果虚拟视口为 980 像素，则永远不会使用以 640 像素或 480 像素或更小的速度启动的媒体查询，从而限制了此类响应式的有效性 设计技术。视口 <meta> 元素缓解了窄屏幕设备上虚拟视口的问题。

¥However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques. The viewport <meta> element mitigates this problem of virtual viewport on narrow screen devices.

¥Viewport basics

典型的移动优化网站包含如下内容：

¥A typical mobile-optimized site contains something like the following:

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

并非所有设备的宽度都相同；你应该确保你的页面在各种屏幕尺寸和方向上都能正常工作。

¥Not all devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.

"viewport" <meta> 元素的基本属性包括：

¥The basic attributes of the "viewport" <meta> element include:

width

控制视口的大小。它可以设置为特定数量的像素，如 width=600 或特殊值 device-width，即 100vw，或视口宽度的 100%。最低限度：1。最大限度：10000。负值：被忽略。

height

控制视口的大小。它可以设置为特定数量的像素，如 height=400 或特殊值 device-height，即 100vh，或视口高度的 100%。最低限度：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 倍变焦。

¥Warning: Usage of user-scalable=no can cause accessibility issues to users with visual impairments such as low vision. WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.

¥Screen density

屏幕分辨率已经提高到人眼无法区分单个像素的大小。例如，智能手机通常具有分辨率高达 1920-1080 像素（约 400dpi）的小屏幕。因此，许多浏览器可以通过为每个 CSS "pixel" 转换多个硬件像素来以更小的物理尺寸显示页面。最初，这导致许多触摸优化网站出现可用性和可读性问题。

¥Screen resolutions have risen to the size that individual pixels are indistinguishable by the human eye. For example, smartphones often have small screens with resolutions upwards of 1920–1080 pixels (≈400dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially, this caused usability and readability problems on many touch-optimized websites.

在高 dpi 屏幕上，带有 initial-scale=1 的页面将被浏览器有效缩放。它们的文本将平滑且清晰，但它们的位图图片可能无法利用全屏分辨率。为了在这些屏幕上获得更清晰的图片，Web 开发者可能希望以比最终尺寸更高的比例设计图片（或整个布局），然后使用 CSS 或视口属性将其缩小。

¥On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images may not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties.

默认像素比取决于显示密度。在密度小于 200dpi 的显示器上，该比率为 1.0。在密度介于 200 和 300dpi 之间的显示器上，该比率为 1.5。对于密度超过 300dpi 的显示器，该比率为整数下限（密度/150dpi）。请注意，仅当视口比例等于 1 时，默认比率才为 true。否则，CSS 像素和设备像素之间的关系取决于当前的缩放级别。

¥The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor (density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

¥Viewport width and screen width

站点可以将其视口设置为特定大小。例如，定义 "width=320, initial-scale=1" 可用于在纵向模式下精确地适合小型手机显示屏。当浏览器以较大尺寸呈现页面时，这可能会导致问题。为了解决这个问题，浏览器将在必要时扩展视口宽度，以按请求的比例填充屏幕。这在大屏幕设备上特别有用。

¥Sites can set their viewport to a specific size. For example, the definition "width=320, initial-scale=1" can be used to fit precisely onto a small phone display in portrait mode. This can cause problems when the browser renders a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices.

对于设置初始或最大比例的页面，这意味着 width 属性实际上转换为最小视口宽度。例如，如果你的布局需要至少 500 像素的宽度，那么你可以使用以下标记。当屏幕宽度超过 500 像素时，浏览器将扩展视口（而不是放大）以适合屏幕：

¥For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:

<meta name="viewport" content="width=500, initial-scale=1" />

其他可用的 attributes 包括 minimum-scale、maximum-scale 和 user-scalable。这些属性会影响初始比例和宽度，并限制缩放级别的变化。

¥Other attributes that are available are minimum-scale, maximum-scale, and user-scalable. These properties affect the initial scale and width, as well as limiting changes in zoom level.

¥The effect of interactive UI widgets

浏览器的交互式 UI 小部件可以影响页面视口的大小。最常见的此类 UI 小部件是虚拟键盘。要控制浏览器应使用哪种调整大小行为，请设置 interactive-widget 属性。

¥Interactive UI widgets of the browser can influence the size of the page's viewports. The most common such UI widget is a virtual keyboard. To control which resize behavior the browser should use, set the interactive-widget property.

允许的值为：

¥Allowed values are:

resizes-visual

visual viewport 通过交互式小部件调整大小。

resizes-content

viewport 通过交互式小部件调整大小。

overlays-content

交互小部件不会调整 viewport 和 visual viewport 的大小。

当 viewport 调整大小时，初始 包含块 也会调整大小，从而影响 视口单位 的计算大小。

¥When the viewport gets resized, the initial containing block also gets resized, thereby affecting the computed size of viewport units.

¥Common viewport sizes for mobile and tablet devices

如果你想了解哪些移动设备和平板电脑设备具有哪些视口宽度，可以查看 移动设备和平板电脑视口尺寸见此处 的完整列表。这提供了诸如纵向和横向视口宽度以及物理屏幕尺寸、操作系统和设备的像素密度等信息。

¥If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.

¥See also

• 文章：为 Android 版 Chrome 的视口调整大小行为更改做好准备