还设置了&quot；Initial-Scale=1.0&quot；时，从视口元标记中删除&quot；width=Device-Width&Quot；的副作用

Side effects of removing quot;width=device-widthquot; from viewport meta tag when quot;initial-scale=1.0quot; is also set(还设置了quot；Initial-Scale=1.0quot；时，从视口元标记中删除quot；width=Device-WidthQuot；的副作用)

问题描述

虽然<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翻译的：

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/max-height值为视区的长度。

他们还给出了一个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;
}

我这里的另一个问题是值到底是什么？