本文介绍如何使用“viewport”<meta>标签来控制视口的大小和形状。
背景
浏览器的视口是可以看到网页内容的窗口区域。这通常与呈现的页面大小不同，在这种情况下，浏览器会提供滚动条供用户滚动并访问所有内容。
某些移动设备和其他窄屏幕在虚拟窗口或视口中渲染页面（通常比屏幕宽），然后缩小渲染结果，以便一次可以看到所有内容。然后，用户可以平移和缩放以查看页面的不同区域。例如，如果移动屏幕的宽度为 640 像素，则页面可能会使用 980 像素的虚拟视口进行渲染，然后它将缩小以适应 640 像素的空间。
这样做是因为并非所有页面都针对移动设备进行了优化，并且在以小视口宽度渲染时会损坏（或至少看起来很糟糕）。这种虚拟视口是一种使非移动优化网站在窄屏幕设备上看起来更好的方法。
然而，这种机制对于使用媒体查询针对窄屏幕进行优化的页面不太好- 例如，如果虚拟视口为 980 像素，则永远不会使用以 640 像素或 480 像素或更小的尺寸启动的媒体查询，从而限制了此类的有效性响应式设计技术。视口元标记缓解了窄屏幕设备上虚拟视口的问题。
视口基础知识
典型的移动优化网站包含如下内容：
HTML
复制到剪贴板
<meta name="viewport" content="width=device-width, initial-scale=1" />
并非所有设备的宽度都相同；您应该确保您的页面在各种屏幕尺寸和方向上都能正常工作。
“viewport”标签的基本属性<meta>包括：
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.
评论