还设置了“initial-scale=1.0”时从视口元标记中删除“width=device-width”的副作用

Question

虽然<meta name="viewport"> 标签未标准化，但它“由于事实上的主导地位而受到大多数移动浏览器的尊重。”

它不是真正的网络标准的一个缺点是详细的文档不像其他标准那样可用。 CSS Working Group 对此有一个规范，所以我主要将其用作权威作品。

我的主要问题是：

以下声明之间的感知差异是什么？

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

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

另外问，这两个@viewport CSS at-rules有什么区别：

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

---

我是如何得到那些 @viewport 翻译的：

width=device-width 到 min-width: extend-to-zoom; max-width: 100vw;

CSS Device Adaptation Module Level 1 document 声明：

width 和height 视口<META> 属性被转换为width 和height 描述符，将min-width/min-height 值设置为extend-to-zoom 和max-width/@9867 @value 到视口的长度。

他们还给了example：

这个<META> 元素：

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

翻译成：

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

width shorthand descriptor 被描述为：

这是设置min-width 和max-width 的简写描述符。一个<viewport-length> 值会将min-width 和max-width 设置为该值。两个<viewport-length> 值会将min-width 设置为第一个，将max-width 设置为第二个。

所以按理说width: extend-to-zoom 500px; 等价于min-width: extend-to-zoom; max-width: 500px;。

只剩下100vw 部分。在section 10.4 中，他们解释说：

device-width 和 device-height 分别转换为 100vw 和 100vh

所以我们终于可以看到width=device-width是如何翻译成min-width: extend-to-zoom; max-width: 100vw;了。

initial-scale=1.0 到 zoom: 1.0; width: extend-to-zoom;

这个是verbatim example：

这个<META> 元素：

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

翻译成：

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

---

我的另一个问题是，究竟是什么extend-to-zoom 值？

documentation on it 及其resolution procedure 很难掌握。如果有人能指出我在这方面的一些进一步的例子，那将不胜感激。

---

除了以上所有内容之外，我还建立了一个快速站点 - https://romellem.github.io/temp-site/viewport/ - 来测试一些视口配置。

即：

• content="width=device-width, initial-scale=1.0"
• content="initial-scale=1.0"

这可能有助于测试。

Answer 1

在深入研究您的问题之前，让我们先回顾一下为什么首先存在viewport 元标记。这是我收集到的。

---

为什么我们需要viewport 标签？

视口是可以看到 Web 内容的区域。通常，渲染页面（网页内容）大于视口。因此，我们通常使用滚动条来查看隐藏的内容（因为视口无法显示所有内容）。 Quoted from CSS Device Adaptation Module Level 1:

狭窄的视口对于设计得很好的文档来说是一个问题 在桌面浏览器中。结果是移动浏览器供应商使用 固定的初始包含块大小不同于 视口大小，接近典型桌面浏览器窗口的大小。 除了滚动或平移之外，还经常使用缩放来改变 在文档概览和放大特定区域之间 要阅读和与之交互的文档。

在移动设备（和其他较小的设备）中，initial containing block 通常大于视口。例如，屏幕宽度为640px 的移动设备可能具有980px 的初始包含块。在这种情况下，初始包含块被缩小为640px，以便它可以适合移动屏幕。这个640px 宽度（屏幕宽度）就是我们所讨论的视口的initial-width。

所以.... 为什么我们需要这个viewport 标签？好吧，现在，我们有media queries，它允许我们为移动设备进行设计。但是，此媒体查询取决于 实际 视口的宽度。在移动设备中，用户代理会自动将初始视口大小设置为不同的固定大小（通常大于初始视口大小）。因此，如果移动设备的视口宽度是固定的，我们在媒体查询中使用的 CSS 规则将不会被执行，因为视口的宽度永远不会改变。使用viewport 标签，我们可以控制 实际 视口的宽度（在被UA 设置样式之后）。 Quoted from MDN:

但是，对于使用媒体查询针对窄屏幕进行优化的页面，这种机制并不是那么好——例如，如果虚拟视口为 980 像素，则永远不会使用以 640 像素或 480 像素或更小的尺寸启动的媒体查询，从而限制了这种响应式设计技术的有效性。

注意viewport 标签也可以改变实际视口的高度，而不仅仅是宽度

---

viewport 标签的width

viewport 标记中的width 在@viewport 规则中转换为max-width。当您将width 声明为device-width 时，它会在@viewport 规则中转换为100%。 Percentage value 是根据视口的initial-width 解析的。因此，如果我们仍在使用上面的示例，max-width 将解析为值640px。正如您所发现的，这只指定了max-width。 min-width 将自动成为 extend-to-zoom。

---

extend-to-zoom

您的问题是 extend-to-zoom 的价值究竟是什么？从我收集到的信息来看，它是用于支持视口扩展自身以适应给定缩放级别的查看区域的值。换句话说，它是一个视口大小值，会根据指定的缩放值而变化。一个例子？假设 UA 样式表的 max-zoom 值为 5.0，initial-width 为 320px，<meta name="viewport" content="width=10"> 将解析为初始实际宽度 64px。这是有道理的，因为如果一个设备只有 320px 并且只能缩放5x 正常值，那么最小视口大小将是320px divided by 5，这意味着一次只能显示 64px（而不是 10px 因为那需要放大 32 倍！）。算法将使用此值来确定如何扩展（更改）min-width 和 max-width 值，这将在确定实际视口宽度方面发挥作用。

---

把它们放在一起

那么本质上，<meta name="viewport" content="width=device-width, initial-scale=1.0"> 和 <meta name="viewport" content="initial-scale=1.0"> 之间有什么区别？只需重做算法的步骤（this 和this）。让我们先做后者（没有width 属性的那个）。 （我们假设视口的initial-width 是640px。）

• width 未设置，这将导致 @viewport 规则中的 max-width 和 min-width 成为 extend-to-zoom。
• initial-scale 是 1.0。这意味着zoom 的值也是1.0
• 让我们resolve extend-to-zoom。脚步：
  1. extend-zoom = MIN(zoom, max-zoom)。 MIN 操作解析为非auto 的值。这里，zoom 是 1.0，max-zoom 是 auto。这意味着extend-zoom 是1.0
  2. extend-width = initial-width / extend-zoom。这很容易;将 640 除以 1。你得到 extend-width 等于 640
  3. 因为extend-zoom不是auto，所以我们将跳到第二个条件。 max-width 确实是extend-to-zoom，这意味着max-width 将被设置为extend-width。因此，max-width = 640
  4. min-width 也是extend-to-zoom，这意味着将min-width 设置为max-width。我们得到min-width = 640
• 在resolving the non-auto 之后（即extend-to-zoom）值用于max-width 和min-width。我们可以继续the next procedure。因为min-width或max-width不是auto，我们将在程序中使用第一个if，从而将初始实际视口width设置为MAX(min-width, MIN(max-width, initial-width))，相当于MAX(640, MIN(640, 640))。这将解析为 640 用于您的初始实际视口 width
• 转到the next procedure。在这一步中，width 不是auto。该值没有改变，我们最终得到640px 的实际视口width

让我们做前者。

• width 已设置，这将导致 max-width 成为 100%（在我们的例子中为 640px）和 min-width 在 @viewport 规则中成为 extend-to-zoom。
• initial-scale 是 1.0。这意味着zoom 的值也是1.0
• 让我们resolve extend-to-zoom。如果您仔细按照步骤操作（几乎与上述相同），您最终会得到640px 的max-width 和640px 的min-width。
• 您现在可能会看到这种模式。我们会得到640px的实际视口宽度。

那么感知到的差异是什么？ 基本上没有。他们俩都做同样的事情。希望我的解释有所帮助；-) 如果有任何问题，请告诉我。