css - 当还设置了 "width=device-width"时，从视口(viewport)元标记中删除 "initial-scale=1.0"的副作用

Question

而 <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">

或者问，这两者之间有什么区别@viewport CSS 规则:

/* 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指出:

The width and height viewport <META> properties are translated into width and height descriptors, setting the min-width/min-height value to extend-to-zoom and the max-width/max-height value to the length from the viewport.

他们还给出了 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被描述为:

This is a shorthand descriptor for setting both min-width and max-width. One <viewport-length> value will set both min-width and max-width to that value. Two <viewport-length> values will set min-width to the first and max-width to the second.

所以按理说width: extend-to-zoom 500px;相当于 min-width: extend-to-zoom; max-width: 500px; .

那只剩下 100vw部分。内section 10.4 ，他们解释说:

device-width and device-height translate to 100vw and 100vh respectively

所以我们终于可以看到如何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究竟是什么？值(value)？

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

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

即:

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

content="initial-scale=1.0"

这可能有助于测试。

Answer 1

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

为什么我们需要viewport标签？

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

The narrow viewport is a problem for documents designed to look good in desktop browsers. The result is that mobile browser vendors use a fixed initial containing block size that is different from the viewport size, and close to that of a typical desktop browser window. In addition to scrolling or panning, zooming is often used to change between an overview of the document and zoom in on particular areas of the document to read and interact with.

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

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

However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.

请注意 viewport标签也可以改变实际视口(viewport)的高度，而不仅仅是宽度
viewport标签widthwidth在 viewport标签被翻译成 max-width在 @viewport规则。当您声明 width如 device-width ，翻译成 100%在 @viewport规则。 Percentage value基于 initial-width 解决的视口(viewport)。所以如果我们仍然使用上面的例子，max-width将解析为 640px 的值.正如您所发现的，这仅指定了 max-width . min-width将自动为 extend-to-zoom .
extend-to-zoom
您的问题是扩展到缩放的值(value)究竟是什么？从我收集到的信息来看，它是用于支持视口(viewport)扩展以适应给定缩放级别的查看区域的值。换句话说，它是一个视口(viewport)大小值，它根据指定的缩放值而变化。一个例子？鉴于max-zoom UA 样式表的值为 5.0和 initial-width是 320px , <meta name="viewport" content="width=10">将解析为 64px 的初始实际宽度.这是有道理的，因为如果设备只有 320px 并且只能缩放 5x正常值，那么最小视口(viewport)大小将为 320px divided by 5 ，这意味着一次只显示 64 像素( 而不是 10px 因为这需要放大 32 倍!)。算法将使用此值来确定如何扩展(更改)min-width和 max-width值，这将在确定实际视口(viewport)宽度方面发挥作用。

把这一切放在一起

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

width未设置，这会导致 max-width和 min-width正在 extend-to-zoom在 @viewport规则。

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.0

extend-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在程序中，从而设置初始实际视口(viewport)width至 MAX(min-width, MIN(max-width, initial-width)) ，相当于 MAX(640, MIN(640, 640)) .这解析为 640用于您的初始实际视口(viewport) width

转到 the next procedure .在这一步，width不是 auto .值没有改变，我们最终得到了实际的视口(viewport) width的 640px

让我们做前者。

width设置，这将导致 max-width正在 100% (在我们的例子中是 640px)和 min-width正在 extend-to-zoom在 @viewport规则。

initial-scale是 1.0 .这意味着 zoom值也是 1.0

让我们 resolve extend-to-zoom .如果你仔细地按照步骤操作(几乎和上面一样)，你最终会得到一个 max-width的 640px和一个 min-width的 640px .

您现在可能会看到这种模式。我们将获得 640px 的实际视口(viewport)宽度.

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