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

Question

我正在构建一个无响应的网站，并在移动视图中遇到问题。我没有视口集。我假设内容在移动设备上看起来应该与在桌面上缩小时相同。

以下是我的问题的视觉效果：

说明：

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

谢谢！

Answer 1

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

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

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

为了说明，这里是一个网站示例，其中包含一个宽度为590px的主div，它在默认视口大小为980x时呈现的方式，以及当自定义视口宽度为590px时呈现的方式使用元视口标记指定：

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