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

Question

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

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

说明：

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

谢谢！

Answer 1

如果您的网站没有响应，设置视口将有所帮助。在网络浏览器中打开该网站，找到使您的设计不被破坏的最小宽度。然后在标题中使用以下元标记，将

width

替换为您希望网站显示的最小宽度。

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

元视口标签告诉浏览器它应该以不同于默认宽度的宽度呈现网页。例如，Safari iOS 的默认视口大小为 980px，这意味着对于没有元视口标签的网页，正文将呈现 980px 宽。通过指定宽度为 1024 的元视口标签，正文将以 1024px 宽渲染。

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

有关视口元标记的详细信息：
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag