响应式网站在移动设备上缩小到全宽

Posted 2023-02-16

【中文标题】响应式网站在移动设备上缩小到全宽

【英文标题】：Responsive website zoomed out to full width on mobile

【发布时间】：2013-10-09 23:50:09

【问题描述】：

我正在测试 Bootstrap 响应导航栏，并且我有一个 demo 网站。当我在桌面上调整浏览器的大小时，一切正常，包括导航栏，它变成了可折叠的菜单，顶部有一个小图标，我可以单击它来查看更多菜单按钮。

但是当我从移动浏览器尝试时（我在 android 上的 chrome 和互联网浏览器上尝试过），我没有看到响应式设计。我只能看到非常小的桌面版本，比如网站。

谁能指出我做错了什么？

【参考方案1】：

将此添加到您的 html 头中..

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

这告诉较小的设备浏览器如何缩放页面。您可以在此处阅读更多相关信息：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

【讨论】：

我已在 head 部分添加了此代码，但它不适用于我的默认 android 互联网浏览器，您可以检查 - www.freerechargeapp.com/index.html

我真的不明白为什么对我来说不起作用。在一个网站上可以工作，而在另一个网站上则不行。并且代码结构与新引导类似

@Skelly - 我看到的其他答案忽略了maximum-scale，并使用1.0 而不是1。你知道这些事情是否会有所作为吗？

【参考方案2】：

这里建议http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

<meta name="viewport" content="initial-scale=1">

将是一个更好的选择，因为它使从纵向到横向并返回更愉快的用户体验，因为由于可能的自动缩放，with/height 会自然采用。

【讨论】：

谢谢，这解决了 iPhone 上的缩放问题，并以不同的方式（正确地）显示纵向和横向。

【参考方案3】：

为搜索此错误但接受的答案不起作用的人添加此选项。我相信这将是一个罕见但令人沮丧的案例：

如果您的页面在框架集中呈现（例如域隐藏），那么放置元标记将无济于事。您需要将它们放在伪装域的页面中，根据您的 DNS 主机，您可能有权访问，也可能无权访问。

【参考方案4】：

尝试清除浏览器的缓存并在新标签页中打开页面。这有时会在发生问题时为我解决问题。