如何在无响应的移动网站上设置视口？答案

【问题标题】：How to set the viewport on a non-responsive mobile site?如何在无响应的移动网站上设置视口？
【发布时间】：2015-10-07 14:32:20
【问题描述】：

我正在设计一个无响应的网站并且在移动视图中遇到问题。我没有设置视口。我认为内容在移动设备上的显示应该与在桌面上的显示相同，只是缩小了。

这是我的问题的视觉效果：

解释：

在桌面上查看时没问题。在 iPhone（移动设备）上，页眉、导航和页脚的宽度缩小（见图），并且主要内容基本上超出了手机视框（或视口或其他）......

谢谢！

【问题讨论】：

标签： html ios css viewport

【解决方案1】：

如果您的网站没有响应，设置视口会有所帮助。在您的网络浏览器中打开该站点，并找到使您的设计不会中断的最小宽度。然后在标题中使用以下元标记，将 width 替换为您希望网站显示的最小宽度。

<meta name="viewport" content="width=1024">

元视口标签告诉浏览器它应该以不同于默认宽度的宽度呈现网页。例如，the default viewport size for Safari iOS is 980px，这意味着对于没有元视口标签的网页，正文将呈现 980 像素宽。通过指定一个宽度为 1024 的 meta viewport 标签，body 将被渲染为 1024px 宽度。

为了说明，这里有一个网站的例子，它有一个宽度为 590px 的主 div，它如何在默认视口大小 980x 下呈现，以及当使用元数据指定 590px 的自定义视口宽度时它如何呈现视口标签：

视口元标记的详细信息：
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

【讨论】：

当我添加这个 VP 时，它被放大了（就像 200px x 400px 的页面是可见的......）
@nthChild 要从缩小页面开始，请不要设置 initial-scale 属性。我已经更新了我的答案以反映这一点。
这成功了！谢谢你。你能解释一下这是如何工作的吗？
@nthChild 编辑了答案以提供更多详细信息。