元视口：width=device-width 或 initial-scale=1 或两者答案

【问题标题】：Meta viewport : width=device-width or initial-scale=1 or both元视口：width=device-width 或 initial-scale=1 或两者
【发布时间】：2014-04-17 02:20:02
【问题描述】：

对于一个完全响应的网页设计，我应该使用以下哪个元视口声明：

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

我希望设计在旋转设备后适合屏幕。

【问题讨论】：

标签： html responsive-design viewport

【解决方案1】：

就个人而言，我会使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

width 属性控制视口的大小。可以设置为特定数量的像素，例如 width=600 或特殊值 device-width 值，它是以 CSS 像素为单位的屏幕宽度比例为 100%。（有对应的height和device-height 值，这对于具有改变大小的元素的页面可能很有用或基于视口高度的位置。）

initial-scale 属性控制页面首次加载时的缩放级别。最大尺度、最小尺度和用户可缩放的属性控制用户如何缩放翻页或翻页

【讨论】：

感谢您的回答，该网站link 指出了一起使用width=device-width 和initial-scale=1.0 的一些问题：他们告诉您使用initial-scale=1.0 更安全，只是为了避免设备旋转问题。这对我来说看起来更自然。但是，像 CSS-Tricks 这样的一些“真实”网站只使用 width=device-width，所以最后我仍然在寻找最佳实践......
老实说，我不确定元标记是否存在“最佳实践”。它基本上归结为您希望它如何与您的网站一起使用。如果在旋转设备时它会给您带来不希望的结果，那么您可能不需要宽度。