width=device-width 和 initial-scale=1 是多余的吗？答案

【问题标题】：Is width=device-width redundant alongside initial-scale=1?width=device-width 和 initial-scale=1 是多余的吗？
【发布时间】：2014-02-11 13:33:23
【问题描述】：

在研究视口行为时，我在理解元视口声明方面遇到了一些障碍。

我看到width=device-width 和initial-scale=1 经常一起使用，但据我所知，后者意味着前者。

MDN 还提到同时定义width 和initial-scale=1 将导致宽度作为最小视口宽度。如果是这种情况，那么是否需要将宽度定义为device-width？无论如何，对于任何小于设备宽度的布局视口，初始比例肯定不能为 1。

我是否遗漏了什么或者在这里将宽度定义为设备宽度多余？

谢谢

【问题讨论】：

当您指示 initial-scale=1 时，我使用的所有浏览器都意味着设备宽度减小，但反之则不然。

标签： html css mobile viewport

【解决方案1】：

这两个标签不一样。

“width=device”标签告诉浏览器使用设备的实际宽度作为屏幕的 100% 宽度。如果您省略它，移动设备将模拟为具有更高的分辨率，并且您的内容不会被拉伸到全宽。

initial-scale 是首次加载时的缩放级别。如果将其设置为 1 以及 'width=device'，则内容将不会被缩小或缩小。您也将无法缩小超过初始比例（但您仍然可以放大）。就好像您也将 'minimum-scale' 设置为 1。

还有一个“maximum-scale”，如果您也将其设置为 1，用户将无法放大超过初始比例。

这是一个如何创建“类似应用”感觉的示例，其中内容以 1:1 的比例使用设备的宽度。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

希望这会有所帮助！

【讨论】：

我知道标签不一样。我得到的是initial-scale=1 本身似乎可以完成两者的工作。只是想知道是否有任何方法不会出现这种情况。
您问后者是否暗示前者，而我的回答是否定的。绝对不是故意来找你的，好像你不知道他们不完全一样。 Initial-scale 不会告诉浏览器实际宽度是多少，因此在某些浏览器中它可能会自行工作，AFAIK 它不会是跨浏览器解决方案。

【解决方案2】：

同时使用width=device-width 和initial-scale=1 确保跨浏览器/设备的兼容性。例如，对于 iOS 设备，您的页面需要 initial-scale=1 才能了解设备的方向变化，因为 width=device-width 不会。使用这两者确保使用元视口标签的最大效果。

【讨论】：

你能举出width=device-width在initial-scale=1存在时改变行为的例子吗？还是这更像是“以防万一”？
这不是一个以防万一的事情，尽管市场上总是有这么多新设备出现，但这并没有什么坏处。这个页面可能就是你要找的：quirksmode.org/mobile/metaviewport/notes.html
是的，很公平。该资源澄清了很多。谢谢！