1. 引言
CSS 2.1 [CSS21] 规定了 初始包含块，用于连续媒体，其尺寸由视口决定。由于视口通常不会比显示器大， 拥有较小屏幕的设备（如手机或平板）提供的视口通常比桌面或笔记本电脑等大型设备要小。
不幸的是，许多文档在历史上都是针对较大的视口设计的，在小视口中表现会出现各种问题，包括布局意外换行、内容被裁剪、可滚动区域异常及脚本错误。为避免这些问题，移动浏览器通常会使用一个固定的初始包含块宽度来模拟桌面浏览器窗口大小（通常为980-1024px）。随后会将所得布局缩放，使其适应可用屏幕空间。
尽管这种做法缓解了上述问题，但缩放意味着CSS像素大小会比CSS 2.1 推荐的要小。用户很可能需要对内容进行缩放才能舒适阅读。
对于那些针对小视口设计的网站，上述做法是没有必要的。
本规范从实现角度进行编写，导致其可读性可能较差。为使其对不同受众更易理解，可能需要进行大量编辑工作。同时，需要明确不同js API所指的视口。详见 ppk 的这篇博文 以获得更多讨论。
本规范及相关规范涉及的各类问题可见于 此报告。
2. 视口
在CSS 2.1中，视口是用户代理用于连续媒体的一项功能，并用于为连续媒体建立初始包含块。 对于分页面媒体，初始包含块基于页面区域。页面区域可通过@page规则进行设置。
本规范引入了一种覆盖用户代理（UA）提供的视口尺寸的方法。因此，需要引入 initial viewport（初始视口）与 actual viewport（实际视口）的区别。
- initial viewport
- 指被窗口或UA的可视区域提供，且未被UA或作者样式覆盖前的视口。注意，initial viewport 的尺寸会随着窗口或可视区域尺寸变化而改变。
- actual viewport
- 这是处理视口
<meta>标签后得到的视口。
将 actual viewport 作为布局视口，并定义可视视口（visual viewport）。
当 actual viewport 无法完全适配窗口或可视区域时（例如 actual viewport 大于 initial viewport，或缩放因子导致只有部分实际视口可见），UA 应提供滚动或平移机制。
建议初始时，若文档基础方向为 ltr，则 actual viewport 和窗口或可视区域的左上角对齐；若为 rtl，则右上角对齐。文档基础方向由 HTML 或
XHTML 文档的首个 <BODY> 元素的 direction 属性的计算值决定。其他文档类型则取其根元素的计算 direction。
3. 视口 <meta> 元素
3.1. 属性
视口 <meta> 元素中可识别的属性有：
widthheightinitial-scaleminimum-scalemaximum-scaleuser-scalableinteractive-widget
3.2. 解析算法
下面是针对 content 属性的解析算法，源自对 iPhone 上 Safari 的测试。 测试在运行 iPhone OS 4
的 iPod touch 上进行，浏览器UA字符串为："Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X;
en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5
Mobile/8A293 Safari/6531.22.7"。 伪代码记号采用了 [Algorithms] 中的风格。
空白符类别包含以下字符（ASCII）：
- 水平制表符 (0x09)
- 换行 (0x0a)
- 回车 (0x0d)
- 空格 (0x20)
Safari 实现中，属性/值对之间可用逗号分隔。一些实现也支持逗号和分号，因此现有内容常用分号。为保证内容兼容，作者应使用逗号，但实现者可兼容两者以支持现有内容互操作。
分隔符类别包含以下字符（ASCII），逗号为首选，分号为可选：
- 逗号 (0x2c)
- 分号 (0x3b)
Parse-Content(S) i ← 1 while i ≤ length[S] do while i ≤ length[S] and S[i] in [whitespace, separator, '='] do i ← i + 1 if i ≤ length[S] then i ← Parse-Property(S, i) Parse-Property(S, i) start ← i while i ≤ length[S] and S[i] not in [whitespace, separator, '='] do i ← i + 1 if i > length[S] or S[i] in [separator] then return i property-name ← S[start .. (i - 1)] while i ≤ length[S] and S[i] not in [separator, '='] do i ← i + 1 if i > length[S] or S[i] in [separator] then return i while i ≤ length[S] and S[i] in [whitespace, '='] do i ← i + 1 if i > length[S] or S[i] in [separator] then return i start ← i while i ≤ length[S] and S[i] not in [whitespace, separator, '='] do i ← i + 1 property-value ← S[start .. (i - 1)] Set-Property(property-name, property-value) return i
Set-Property 匹配列出的属性名（不区分大小写）。
property-value 字符串的解释方式如下：
- 如果
property-value的前缀可以用strtod转换为数字， 则该值即为该数字，其余部分被忽略。 - 若无法如上转换为数字，则整个
property-value字符串会与下列字符串（不区分大小写）匹配：yes、no、device-width、device-height - 如字符串未匹配任何已知值，则视为未知值。
3.3. extend-to-zoom
需通过 viewport meta 标签规范 extend-to-zoom 行为
3.4. interactive-widget
将 visual viewport 的定义从 CSSOM-View 移至本规范。
interactive-widget
属性用于指定交互式UI组件对页面视口的影响。它定义了组件是覆盖视口，还是收缩视口以保持其在组件显示时依然全部可见。交互式UI组件是指用户可以输入内容的临时用户代理或操作系统UI。
下面列出了 interactive-widget 的有效值及其对应的视口调整行为：
overlays-content- 交互式UI组件不得 调整
初始视口
或
可视视口的尺寸。用户代理应与
VirtualKeyboard.overlaysContent设为true时的表现一致。 resizes-content- 交互式UI组件必须 调整 初始视口 尺寸。
resizes-visual- 交互式UI组件应 调整 可视视口 的尺寸，但不得 调整 初始视口。
如果 interactive-widget 未设置或值无效，则默认行为为 resizes-visual。
要通过交互式组件调整视口尺寸时，需从视口矩形中减去与组件操作系统报告的包围矩形的相交部分。如果结果不是矩形，行为由用户代理自行定义。
3.4.1. 与 virtualKeyboard.overlaysContent 的交互
[VIRTUAL-KEYBOARD]
提供了命令式API，可通过 overlays-content 行为控制
VirtualKeyboard.overlaysContent
属性。该属性会覆盖通过 interactive-widget 设置的值，具体如下：
当 VirtualKeyboard.overlaysContent
被设为 true 时，UA 判定交互式组件调整行为时必须忽略 interactive-widget 的任何值。
当 VirtualKeyboard.overlaysContent
被设为 false 时，UA 判定行为时应使用 interactive-widget（如未设置则使用默认值）。
读取 VirtualKeyboard.overlaysContent
时必须返回先前设置的值。
VirtualKeyboard.overlaysContent
返回 false，即便通过 <meta> 标签设置了 interactive-widget=overlays-content。附录A. 变更记录
本附录为非规范性内容。
自 2016年3月29日工作草案 之后
- 在 viewport meta 中添加了 interactive-widgets 属性
- 移除了 @viewport 规则
- 规范名称从 device-adapt 重命名为 css-viewport
- 将 CSSViewportRule 暴露给 Window
自 2011年9月15日首次公开工作草案 之后
- 进行多项编辑改进与阐述澄清
- 增加 OM 接口
- meta viewport 支持分号分隔符
- 新增 UA 样式表章节
- 补充何时应当采纳 orientation 属性的推荐
- 移除对 resolution 描述符的支持
- 将 width/height 与 zoom 解耦，引入 extend-to-zoom 用于 meta viewport 转换
- @viewport 和 @media 的交互作出规范规定
- <viewport-length> 及 zoom 值允许为 0
- 移除对 device-width/height 的支持
- @viewport 仅应用于顶层文档
- 嵌套 @media 时，扩展 [CSS3-CONDITIONAL] 而不是 CSS21。
- 移除 @viewport