引导在移动设备上加载错误的网格答案

【问题标题】：bootstrap loading wrong grid on mobile引导在移动设备上加载错误的网格
【发布时间】：2017-01-29 16:30:15
【问题描述】：

我使用引导程序设计了一个网页以使其具有响应性。当我在我的电脑上检查结果时，一切看起来都很好，但是当我将它上传到服务器上时，网格系统有问题。当我在移动设备上打开它时，它加载 col-xs-* 而不是加载 col-sm-* 。当我通过 chrome 检查页面时，它很有趣，在 chrome 顶部导航栏中，我看到宽度为 600px，但它正在加载sm 而不是 xs。

提供更多细节：

当我在本地检查时，它会加载 xs abd 一切都按预期设计，但在线它有问题。（本地和在线视图差异很大）
我在所有页眉的 bs 之前添加了 jquery。
我有一个只包含一个 iframe 的主页，而其他页面加载在这个 iframe 中。我也在包含这个 iframe 的页面上添加了 jaquey 和 bs。
所有页面都有容器类作为主要父级
当我通过 chrome 打开网页并将 chrome 调整为尽可能小的尺寸时，它运行良好（xs 工作正常），但使用 Inspect 或真实设备时出现问题。
chrome 显示此错误：无法解析 SourceMap：http:// server/css/bootstrap.min.css.map 上的项目地址（我尚未将此类库添加到我的项目中）
即使媒体查询也有问题，正如我提到的宽度即时测试是 600px，但 mediaquery max-width:716px 确实有效，而 min-width: 716px 是 workink 而不是那个！

我真的不知道发生了什么！

主 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>

如果有人可以帮助我，我将不胜感激。

【问题讨论】：

您使用的是哪个版本的 Bootstrap？我认为 Bootstrap 4 有一个 544px 的断点，它会触发 -sm。你能提供一个 jsfiddle 来演示这个问题吗？

标签： jquery css twitter-bootstrap grid

【解决方案1】：

我找到了解决方案......令人惊讶的是，只需将以下代码添加到我的 iframe 容器页面就解决了所有问题。

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

【讨论】：