问题描述
虽然<meta name="viewport">标签不是标准化的，但它"由于事实上的支配地位而受到大多数移动浏览器的尊重"。
它不是真正的Web标准的一个缺点是，详细的文档不像其他标准那样可用。CSS Working Group对此有规范，所以这就是我主要用作权威作品的规范。
我的主要问题是：
下列声明之间的感知差异是什么？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-scale=1.0">
或者问，这两个@viewportcss 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翻译的：
推荐答案
在深入了解您的问题之前，让我们先回顾一下viewport元标记最初存在的原因。以下是我收集到的信息。
为什么需要viewport标记？
视区是可以看到Web内容的区域。通常，呈现的页面(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：
然而，对于使用媒体查询针对窄屏幕进行优化的页面，这种机制就不太好了-例如，如果虚拟视区是980px，则永远不会使用640px或480px或更低的媒体查询，从而限制了此类响应式设计技术的有效性。
请注意，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
您的问题是扩展到缩放的确切值是什么？从我收集的信息来看，它是用于支持视区自身扩展以适应给定缩放级别的查看区域的值。换句话说，它是根据指定的缩放值更改的视区大小值。举个例子？假设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未设置，这将导致max-width和min-width在@viewport规则中为extend-to-zoom。initial-scale为1.0。这意味着zoom值也是1.0- 让我们resolve
extend-to-zoom。步骤：extend-zoom = MIN(zoom, max-zoom)。MIN操作解析为非auto的值。这里，zoom是1.0和max-zoom是auto。这意味着extend-zoom是1.0extend-width = initial-width / extend-zoom。这很简单；640除以1。extend-width等于640- 由于
extend-zoom为非auto，我们将跳到第二个条件。max-width确实是extend-to-zoom，这意味着max-width将被设置为extend-width。因此，max-width = 640 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))。这将解析为初始实际视区的640width - 转到the next procedure。在本步骤中，
width不是auto。值不变，我们最终得到的实际视区width640px
让我们选择前者。
width被设置，这将导致max-width为100%(在我们的情况下为640px)，并且min-width在@viewport规则中。initial-scale为1.0。这意味着zoom值也是1.0- 让我们resolve
extend-to-zoom。如果您仔细执行这些步骤(几乎与上面相同)，您将得到max-width的640px和min-width的640px。 - 你现在大概可以看到这个模式了。我们将得到
640px的实际视区宽度。
那么感知到的差异是什么？基本上没有。他们两个都做着同样的事情。希望我的解释能帮上忙；-)如果有什么不对劲的地方，一定要告诉我。
这篇关于还设置了"；Initial-Scale=1.0"；时，从视口元标记中删除"；width=Device-Width&Quot；的副作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！