移动设备上的引导响应

Posted 2023-03-06

技术标签:

【中文标题】移动设备上的引导响应【英文标题】：Bootstrap responsiveness on mobile 【发布时间】：2013-12-31 08:29:27 【问题描述】：

我有这个奇怪的问题。我刚刚在自己的 Web 服务器上设置了一个使用 bootstrap 3.0.3 构建的页面。

我的问题是响应部分，当我通过 Dropbox 建立公共链接时，它在 chrome 和 firefox 甚至在我的手机上都可以正常工作。但是当我尝试使用我的手机三星 Galaxy S3 从我的网络服务器访问它时，它停止工作。我得到了整个页面，而不是被缩小到移动版本。

我已经包含了视口：

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

在谷歌页面速度页面上运行测试时，我收到一条错误消息，指出视口不存在。

我的网络服务器在带有 nginx 的树莓派上运行。

【问题讨论】：

你用什么手机测试？ Galaxy S3 但我认为问题不在于手机。当我从我的公共 Dropbox 链接访问该页面时，everythink 都会调整大小。我也有同样的问题。在 chrome 中将屏幕折叠到 720px 会产生所需的确切结果，包括折叠的导航栏和所有内容，但通过 wifi 或托管服务器访问它会产生平板电脑断点。我被难住了。 【参考方案1】：

您是在使用引导文件的本地副本还是远程？

尝试包含以下文件：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

如果它有效并且您之前尝试使用本地文件，那么这可能是指向本地文件的链接问题。如果其中一个是 404 的，请尝试在浏览器中使用调试控制台检查它们。如果是这样...您必须修复链接。

【讨论】：

嗨，我正在使用本地副本，但我也尝试过远程操作，但恐怕没有运气。这不是世界末日，只是让我无法让它工作很烦人。【参考方案2】：

终于！来自Responsive website zoomed out to full width on mobile：

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

【讨论】：

我一定搞砸了，因为这对我没有帮助：/【参考方案3】：

确保你有

<!DOCTYPE html>

作为代码中的一行发送

【讨论】：

【参考方案4】：

您是否使用 URL 框架（屏蔽转发） 将您的域重定向到您的网络服务器？我遇到了和你一样的问题：（通过远程服务器访问我的网站时，移动设备没有响应。

通知 URL 框架，可能包含 <frame> 或 <iframe>，在这种情况下，移动设备、平板电脑等设备的响应部分将无法工作。

【讨论】：