还设置了“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设备适配模块级别1号文件规定：

的width和height视口<META>特性被转换成width和height描述符，设置min-width/min-height值对extend-to-zoom和max-width/max-height值从视口的长度。

他们还举了一个例子：

这个<META>元素：

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

翻译成：

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

的width速记描述符被描述为：

这是设置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部分了。在第 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;

这是一个逐字示例：

这个<META>元素：

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

翻译成：

@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"
• 内容=“初始比例= 1.0”

这可能有助于测试。

Answer 1

在我们深入研究您要问的问题之前，让我们先回顾一下viewport元标记存在的原因。这是我收集的。

为什么我们需要viewport标签？

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

对于设计为在桌面浏览器中看起来不错的文档来说，窄视口是一个问题。结果是移动浏览器供应商使用固定的初始包含块大小，该大小不同于视口大小，并接近典型桌面浏览器窗口的大小。除了滚动或平移之外，缩放通常用于在文档概览和放大文档的特定区域之间进行切换以进行阅读和交互。

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

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

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

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

viewport 标签的 width

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

extend-to-zoom

您的问题是extend-to-zoom 的价值究竟是什么？从我收集到的信息来看，它是用于支持视口扩展以适应给定缩放级别的查看区域的值。换句话说，它是一个视口大小值，它根据指定的缩放值而变化。一个例子？鉴于max-zoomUA 样式表的值 is5.0和initial-widthis 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未设置，这将导致max-width和min-width是extend-to-zoom在@viewport规则。
• 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-zoomis non- 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))。这将解析640为您的初始实际视口width
• 继续下一个程序。在这一步中，width不是auto。该值没有改变。我们用实际视最终width的640px

让我们做前者。

• width设置，这导致max-width被100%（640px在我们的情况下），并min-width是extend-to-zoom在@viewport规则。
• initial-scale是1.0。这意味着该zoom值也是1.0
• 让我们解决extend-to-zoom。如果您仔细按照步骤操作（几乎与上面相同），您将得到 a max-widthof640px和 a min-widthof 640px。
• 您现在可能会看到这种模式。我们将获得 的实际视口宽度640px。

那么感知差异是什么？基本上没有。他们两个都做同样的事情。希望我的解释有帮助 ;-) 如果有什么不妥，请告诉我。