W3C规范阅读随笔 - CSS Device Adaptation Module Level 1

文档路径：https://www.w3.org/TR/css-device-adapt-1/

摘要

        该规范提供了一种可以让使用者能够在 CSS 中指定视区（viewport）的大小、缩放因子和方向的方法，初始化包含块基于视区。

1 介绍

        CSS 2.1 指出，用于连续媒体的用户代理通常为用户提供视区（屏幕上的窗口或其他观看区域），用户通过该视区查阅文档，而连续媒体的初始包含块尺寸与视区尺寸相同。

        移动/手持设备浏览器的视区通常比桌面浏览器窗口窄很多，很窄的视区对于在桌面浏览器中看起来很好的文档来说是个问题。其结果是，移动浏览器供应商使用固定尺寸的初始包含块，该块的大小不同于视区大小，而是接近于典型的桌面浏览器窗口的大小。除了滚动与平移，也经常使用缩放来改变文档的概览和放大文档的特定区域以便于阅读和交互。

        下图列出了常见移动设备上浏览器默认的初始包含块宽度。

 

        此外，<meta> 标签你能够直接指定初始包含块的大小和初始缩放因子。它最初是 Apple 公司针对 Safari/iPhone 浏览器实现的，但后来已经被应用于 Opera、Android 和 Fennec 浏览器。具体实现不是完全相同的，该规范尝试在 CSS 中对 <meta> 标签与视口相关的功能标准化。

        在 CSS 2.1 中，视区是用于连续媒体的用户代理的特性，用于建立连续媒体的初始包含块。对于分页媒体，初始包含块基于页面区域。页面区域可以通过 @page 规则来进行设置。因此，@viewport 应用于连续媒体，@page 应用于分页媒体，它们不会产生交互或冲突。

2 viewport

        本规范介绍了一种用户代理（UA）提供视区大小的方法。我们需要先介绍初始视区与实际视区之间的区别。

1）初始视区（initial viewport）

        这是指在任何 UA 样式或作者样式已经覆盖了由 UA 的窗口或观看区域创建的视区之前的视区。请注意，初始视区大小将随着窗口或观看区域大小的变化而变化。

2）实际视区（actual viewport）

        样式表中的视区描述符按 CSS 层叠规则计算后的视口。

        当实际视区与窗口或观看区域不相称时，要么因为实际视口大于初始视口，要么因为缩放因子只导致可见视口的部分可见，UA 应提供滚动或平移机制。

3 “@viewport”规则

        @viewport 描述符作用于每个文档，不涉及继承。因此，使用“inherit”关键字的声明将被删除。它们的工作方式类似于 @page 描述符，并遵循 CSS 的层叠顺序。因此，@viewport 描述符将覆盖之前的描述符。声明中允许使用 !important。

        “@viewport”仅适用于顶层文档。

例子：设置视口的宽度至少为 320px，如果它的宽度大于 320px 则与窗口的宽度相同。

@viewport {
    width: 320px auto;
}

4 视口的 <meta> 元素

        描述视区的 <meta> 元素拥有如下属性：

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

        描述视区的 <meta> 元素与 @viewport 描述符之间存在映射关系。

        <meta> 元素：

<meta name="viewport" content="width=500, height=600">

        转换为：

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

         <meta> 元素：

<meta name="viewport" content="initial-scale=1.0">

        转换为：

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

        一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

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

        转换为：

@viewport {
    width: 100vw;
    zoom: 1.0;
}

 

参考

移动前端开发之viewport的深入理解 - https://www.cnblogs.com/2050/p/3877280.html