我使用 bootstrap 设计了一个网页，使其具有响应能力。当我在我的 PC 上检查结果时，一切看起来都很好，但是当我将它上传到服务器时，网格系统有问题。当我在移动设备上打开它时，它加载的不是 col-xs-* 而是 col-sm-* 。这很有趣，当我通过 chrome 检查页面时，在 chrome 顶部导航栏中我看到宽度是 600px，但它正在加载sm 而不是 xs。
提供更多细节:
- 当我在本地检查时，它加载 xs abd 一切都按预期设计，但在网上它有问题。 (本地和在线观点差异很大)
- 我在所有页面标题中的 bs 之前添加了 jquery。
- 我有一个主页，它只包含一个 iframe，其他页面都加载到这个 iframe 中。我也在包含此 iframe 的页面上添加了 jaquey 和 bs。
- 所有页面都以容器类作为主要父级
- 当我通过 chrome 打开网页并将 chrome 调整到尽可能小的大小时，它运行良好(xs 正在运行)，但使用 Inspect 或真实设备时出现问题。
- chrome 显示这个错误:Failed to parse SourceMap: http://project address on server/css/bootstrap.min.css.map (我没有在我的元素中添加这样的库)
- 甚至媒体查询也有问题，正如我提到的，im 测试的宽度是 600px，但是 mediaquery max-width:716px 确实有效，而 min-width:716px 是有效的!
我真的不知道发生了什么!
主要的iframe代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>main</title>
<script src="js/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body style="background-color: gray">
<iframe src="login.html" frameborder="0" id="theMainIFrame" style="width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; right: 0; bottom:0"></iframe>
</body>
</html>
其中一个部分有问题:
<div class="container-fluid">
<div class="row" style="text-align: center">
<div class="col-xs-12 col-xs-push-0 col-sm-12 col-sm-push-0 col-md-6 col-md-push-3 col-lg-4 col-lg-push-4" style="background-color: #bababa">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Login">Login</a></li>
<li><a data-toggle="tab" href="#Register">Register</a></li>
</ul>
</div>
</div>
</div>
如果有人能帮助我，我将不胜感激。
最佳答案
我找到了解决方案……令人惊讶的是，只需将以下代码添加到我的 iframe 容器页面即可解决所有问题。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
关于jquery - Bootstrap 在移动设备上加载错误的网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39616276/