【译文】设备适配新规范 - 上篇_【啃先生】

为了更进一步弄清楚一个 CSS 像素究竟意味着什么，我找遍了 W3C 标准，但草案并没有讲得非常深入，反而里面提及这篇文章，受益匪浅。...

为了更进一步弄清楚一个 CSS 像素究竟意味着什么，我找遍了 W3C 标准，但草案并没有讲得非常深入，反而里面提及这篇文章，受益匪浅。作者有三篇文章解释 viewport，我准备都搬过来，最后做一个总结。

这是第一篇，因为篇幅太长，分两篇翻译，这是上篇。原文是：

http://www.quirksmode.org/blog/archives/2015/09/a_new_device_ad.html。

正文

回到四月，我对当前的 W3C设备适配规范 [1] 中的许多问题感到困惑。规范的编辑之一 Florian Rivoal 与我联系，同意规范有一些问题，并向我解释了一些不太清楚的特性。作为回报，我对一些特性进行整理注释，我认为这些特性应该被加入规范中。

经过大约十封邮件，我们达成一致认为，规范的未来版本应该包含哪些特性。本文总结了我们的结论，并添加了一些未来版本的规范应该回答的问题。

此外，本文还可以快速了解如今 viewport 的地位。除了 @viewport 语法，几乎所有的浏览器都支持下面提到的特性。所以这值得每位 Web 开发人员阅读。

最后，还有一个问题必须回答：如果你在桌面网站上使用响应式图像「x-base」，当用户放大网页时，你应该加载更高 DPR 的图像吗？答案对于定义桌面 DPR 和 screen.width（或height）很重要

一、概述

正如我以前解释[2]的，移动浏览器有一个布局视口「layout viewport」，它设置初始包含块「initial containing block[3]」，用于规定 CSS 布局有多少空间。此外，还有一个可视视口「visual viewport」，这是layout viewport 的可视部分，代表当前用户可以看见 layout viewport 中的多少空间。（桌面浏览器也有 layout viewport 和 visual viewport，但它们是相同的东西：浏览器窗口。）

本文介绍以下主题

visual viewport
为什么将 layout viewport 划分为初始「initial」，默认「default」，理想「ideal」和实际「actual」，这四种布局分别是什么，他们做了什么？
actual viewport 是一个内容窗口
高度「height」
获取 viewport 尺寸的 JavaScript 属性
缩放「Zooming」（这是一个背景知识）
设备像素密比「DPR」

二、Visual viewport

visual viewport 是指用户的可视区域。viewport 的尺寸大小决定可视区域有多少 CSS 像素。当用户缩放页面时，这个数值会变。JavaScript 的 window.innerWidth/Height 暴露当前 visual viewport 的尺寸。这看起来很容易，但是规范没有纳入这个接口，不应该这样。

三、Layout viewport

layout viewport 定义了 CSS 的初始包含块的尺寸。如果 body 的 width 属性是 100%，那么它多宽？答案是，跟layout viewport 一样宽。

看起来很容易理解，但还是有几个要探讨的。首先，浏览器和开发者都可以设置 layout viewport 的尺寸。带着这个前提，Florian 和我将 layout viewport 一分为四：

initial layout viewport。这对 web 开发者来说不重要
default layout viewport。这是为了那些没有适配移动设备的网站而提出的
ideal layout viewport。指的是当前设备的理想尺寸
actual layout viewport。经过浏览器和开发者设置后的实际尺寸。通常情况下，它等同于 ideal viewport 或 default viewport 的尺寸，但这并不一定。

响应式设计是基于将 actual viewport 的尺寸设置为 ideal viewport 的尺寸。

三、Initial layout viewport

对于开发者而言，initial layout viewport 并不重要，因此可以跳过此部分的阅读。

W3C正在大力推动初始值：初始值甚至作用在应用浏览器样式表之前，更不用说作者样式表，规范为所有元素上的所有CSS声明规定了初始值（ Web开发人员可以将任何 CSS 声明设置为特殊值 initial，它等于规范为其定义的初始值）

例如，规范为每个元素定义了 display:inline 的初始值。然后，浏览器样式表才将块级元素设置为 display:block。开发者写的样式表可能再次修改这个值。

理论上，CSS 的 @viewport 指令用于设置 layout viewport 的尺寸「在现实中，并不是因为很难支持 @viewport，而是规范应该包含理论和实践」。@viewport 的初始值是 auto，结果是 initial layout viewport 的尺寸等同于 ideal layout viewport。

从个人出发，我并不那么支持为元素规定初始值，因为我看不到这样做的意义，而且有时候看起来很随意。为什么 display:inline？为什么认为 web 开发者会将 CSS 属性设置为规范定义的初始值？

然而，虽然 initial layout viewport 让人感到困惑或没什么意义，但也没什么坏处。所以如果这让 W3C 和浏览器厂商高兴，就随它去吧。但记住，initial layout viewport 对开发者来说无关紧要。

四、Default layout viewport

浏览器样式表包含 layout viewport 的默认宽度。在移动端，这个宽度介于800和1024 CSS 像素之间，现在则趋向于往这个范围的更高那端靠。

default layout viewport 的目标是，适应那些未针对移动设备进行适配的网站。即使这些网站对于移动设备屏幕而言太大，移动浏览器必须优雅地显示出来，即保持开发者想要的布局。为此，移动浏览器将 layout viewport 尺寸拉伸到类似桌面端的大小。我已经研究[2] 这个问题好几年了。

所以，如果网站开发者没有在网页添加 meta viewport 标签，网站将不适配移动设备，它的layout viewport 尺寸等同于 default layout viewport。

五、Ideal layout viewport

然而，移动端浏览器应该使用设备的 ideal layout viewport 的尺寸，展示站点。web 开发者使用以下代码将 layout viewport 的大小设置为 ideal layout viewport 的尺寸

理论上，以下方式也可以做到，但只有 MS Edge 和 IE 支持，并且需要以此为前缀

使用 JavaScript，screen.width/height 可以获得 ideal layout viewport 的尺寸。但是，有些浏览器粗略地重定义 ideal layout viewport，后面会再解析一下。

六、Actual layout viewport

经过初始值，浏览器样式表和开发者样式表的作用后，layout viewport 的实际尺寸就是 actual layout viewport 。所有未适配移动设备的站点，actual layout viewport 等同于 default layout viewport。而大约 99.99% 适配移动设备的站点，它等同于 ideal layout viewport。

actual layout viewport 不一定非要是 default layout viewport 或 ideal layout viewport，开发者可以给 actual layout viewport 自定义一个尺寸，下面的代码将导致 actual layout viewport 的宽度是 400 CSS 像素

我一直研究 viewport 近6年，依然找不出一个理由要使用这种赋值方法。也许你永远都用不着。

通过 JavaScript 的 document.documentElment.clientWidth「或 Height」可以获取 actual layout viewport 的尺寸。

[1] W3C设备适配规范 https://drafts.csswg.org/css-device-adapt/#intro

[2] A table of two viewports - part 1 http://www.quirksmode.org/mobile/viewports.html

A table of two viewports - part 2 http://www.quirksmode.org/mobile/viewports2.html

[3] initial containing block https://www.w3.org/TR/CSS21/visudet.html#containing-block-details

延伸阅读：

【移动适配】移动Web怎么做屏幕适配（一）

【移动适配】一个像素的border怎么实现

【移动适配】移动Web怎么做屏幕适配（三）