当还设置了“ initial-scale = 1.0”时，从视口元标记中删除“ width = device-width”的副作用

尽管该<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规则之间有什么区别：

/* 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”
• content =“ initial-scale = 1.0”

这可能有助于测试。

在深入研究您的要求之前，让我们先回顾一下为什么viewportmeta标签首先存在。这是我收集的。

为什么需要viewport标签？

视口是可以看到Web内容的区域。通常，渲染的页面（Web内容）大于视口。结果，我们通常使用滚动条来查看隐藏的内容（因为视口无法显示所有内容）。引用自CSS设备适配模块1级：

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

在移动设备（和其他较小的设备）中，初始包含块通常大于视口。例如，屏幕宽度为的移动设备640px的初始包含块为980px。在这种情况下，将初始包含块缩小为640px可容纳到移动屏幕中的位置。这个640px宽度（屏幕宽度）就是所谓initial-width的视口，与我们的讨论有关。

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

但是，此机制对于使用媒体查询针对窄屏进行优化的页面效果不佳-例如，如果虚拟视口为980px，则永远不会使用插入640px或480px或更小的媒体查询，这限制了这种效果响应式设计技术。

请注意，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样式表的值为is 5.0和initial-widthis 320px，<meta name="viewport" content="width=10">将解析为初始实际宽度为64px。这是有道理的，因为如果设备只有320像素并且只能缩放5x正常值，那么最小视口大小将为320px divided by 5，这意味着一次只能显示64像素（而不是 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-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))。解析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。如果您按照步骤仔细（几乎与上述相同），你会落得一个max-width的640px和min-width的640px。
• 您现在可能会看到该模式。我们将获得的实际视口宽度640px。

那么，感知到的区别是什么？基本上没有。他们俩都做同样的事情。希望我的解释有所帮助；-)如果有什么不对，请告诉我。