当在viewport meta标签中设置"initial-scale=1.0"时，移除"width=device-width"会有什么副作用？

Question

尽管<meta name="viewport">标签没有标准化，但由于事实上的主导地位，“大多数移动浏览器都会尊重它”。

它不是真正的Web标准的一个缺点是详细文档不像其他标准那样容易获得。CSS工作组为此制定了一项规范，因此我主要使用它作为权威工作。

我的主要问题是：

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

<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 设备自适应模块 Level 1 文档 表示：

width 和 height 视口 <META> 属性被翻译成 width 和 height 描述符，将 min-width/min-height 值设置为 extend-to-zoom，将 max-width/max-height 值设置为视口长度。

他们还给出了一个example：

This <META> element:

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

translates into:

@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:

This <META> element:

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

translates into:

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

---

我在这里有另一个问题，什么是extend-to-zoom值？ 关于此的文档和其解决方案程序很难理解。如果有人能指向一些更多的例子，那将不胜感激。

---

除了上述所有内容，我还制作了一个快速站点 - https://romellem.github.io/temp-site/viewport/ - 用于测试一些视口配置。

具体来说：

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

这可能有助于测试。

- romellem

Answer 1

在我们深入探讨你所要求的内容之前，让我们先回顾一下为什么首先存在viewport元标记。这是我收集到的信息。

---

我们为什么需要viewport标签？

Viewport是可以看到网页内容的区域。通常，渲染后的页面（网页内容）比viewport大。因此，我们通常使用滚动条来查看隐藏的内容（因为viewport无法显示所有内容）。引用自CSS设备适配模块Level 1：

狭窄的viewport对于设计成在桌面浏览器中展示良好的文档来说是一个问题。其结果是移动浏览器厂商使用了一个与典型桌面浏览器窗口大小不同的固定初始包含块大小。除了滚动或平移之外，缩放通常用于在文档概述和缩放到文档的特定区域以阅读和交互之间进行切换。

在移动设备（和其他较小的设备）中，初始包含块通常比viewport大。例如，具有640px屏幕宽度的移动设备可能具有980px的初始包含块。在这种情况下，初始包含块会缩小到640px，以适应移动屏幕。这个640px的宽度（屏幕宽度）就是我们讨论的initial-width。

那么...我们为什么需要这个viewport标签呢？现在，我们有媒体查询，可以为移动设备进行设计。然而，此媒体查询取决于viewport的实际宽度。在移动设备中，用户代理会自动将初始viewport大小样式化为不同的固定大小（通常比初始viewport大小大）。因此，如果移动设备的viewport宽度是固定的，则我们在媒体查询中使用的CSS规则将不会被执行，因为viewport的宽度永远不会改变。使用viewport标签，我们可以控制由UA样式化后的viewport的实际宽度。引用自MDN：

然而，这种机制对于使用媒体查询优化窄屏幕的页面并不是很好 - 如果虚拟视口为980px，则在640px、480px或更低的媒体查询将永远不会被使用，限制了此类响应式设计技术的效果。请注意，viewport标签可以改变实际视口的高度，而不仅仅是宽度。

---

viewport标签的width

viewport标签中的width被翻译为@viewport规则中的max-width。当您将width声明为device-width时，它会被翻译为@viewport规则中的100%。百分比值基于视口的initial-width进行解析。因此，如果我们仍在使用上面的示例，则max-width将解析为640px的值。正如您所发现的那样，这只指定了max-width。 min-width将自动扩展到缩放。

---

extend-to-zoom

您的问题是什么是extend-to-zoom的价值？据我了解，它是用于支持视口在给定缩放级别下自动扩展以适应查看区域的值。换句话说，它是一个视口大小值，根据指定的缩放值而改变。举个例子，假设UA样式表的max-zoom值为5.0，initial-width为320px，<meta name="viewport" content="width=10">将解析为初始实际宽度为64px。这是有道理的，因为如果设备只有320px，并且只能缩放5x的正常值，那么最小视口大小将是320px除以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
• 让我们解决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
• 在解决非auto（即extend-to-zoom）的max-width和min-width值之后，我们可以继续下一个步骤。因为min-width或max-width不是auto，所以我们将使用程序中的第一个if，从而将初始实际视口width设置为MAX(min-width，MIN(max-width，initial-width))，这相当于MAX(640，MIN(640，640))。这解析为您的初始实际视口width为640
• 继续下一个步骤。在此步骤中，width不是auto。该值未更改，我们最终得到实际视口width为640px

让我们先来做前面的部分。

• width已设置，这会导致max-width为100%（在我们的情况下为640px），并且@viewport规则中的min-width为extend-to-zoom。
• initial-scale为1.0。这意味着zoom值也为1.0
• 让我们解析extend-to-zoom。如果你仔细按照步骤操作（几乎与上面相同），你最终会得到max-width为640px，min-width为640px。
• 你现在可能看到了这个模式。我们将得到实际视口宽度为640px。

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

- Richard

---

这很好，符合我的期望。我会将其标记为答案，但我希望能够解释一下何时可能会出现差异。似乎主要的区别在于如果您具有某些小的初始内容和未设置为“1.0”的初始缩放比例，则会出现差异，但我对此不确定。无论如何，非常感谢您的回答！ - romellem

@romellem 是的，当你指定viewport标签属性时，如果没有指定initial-scale，你可以找到一个感知差异的方法。例如，当你写<meta name="viewport" content="360px">时，你知道你不能控制初始缩放级别。因此，在我的有限测试中，UA样式总是会缩小（通过一些可能不规范的过程）视口。然而，实际视口的宽度始终保持在360px，无论初始视口大小如何。 - Richard

@romellem 续集。...实际视口宽度时，它将始终解析为初始视口宽度。但是，当max-width的值大于初始视口宽度时，最小值将是初始视口宽度，最大值将是 max-width 的值。extend-to-zoom在语义上是有意义的，因为对于min-width上的 extend-to-zoom，当缩放为1.0时，它可以将该值扩展到视口宽度。这与上面的答案一致，即给定缩放级别，extend-to-zoom会改变/扩展/延长width值。 - Richard

视口是网页内容可见的区域。在桌面上，我们可以调整浏览器窗口的大小。这是否意味着视口的宽度和高度会改变？“视口”是否真的与浏览器窗口中可显示用户内容的部分相同？ - Panu Logic

@PanuLogic，《网络忍者》有一个关于这个的不错的视频。 - Aniruddha