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

nth*_*ild 1 html css viewport ios

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

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

内容溢出浏览器框架

说明:

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

谢谢!

Max*_*ter 9

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

<meta name="viewport" content="width=1024">
Run Code Online (Sandbox Code Playgroud)

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

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

iOS上的视口宽度

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