Jquery 在移动设备上引导加载错误的网格_Jquery_Css_Twitter Bootstrap_Grid

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

jquery css twitter-bootstrap grid

Jquery 在移动设备上引导加载错误的网格,jquery,css,twitter-bootstrap,grid,Jquery,Css,Twitter Bootstrap,Grid,我用bootstrap设计了一个网页，使其具有响应性。当我在我的电脑上检查结果时，一切看起来都很好，但当我把结果上传到服务器上时，网格系统出现了问题。当我在手机上打开它时，不是加载X列-*而是加载sm列-*。当我通过chrome查看页面时，很有趣，在chrome顶部导航栏中，我看到宽度是600px，但它加载的是sm而不是xs 详情如下: 当我在本地检查时，它加载xs abd，所有东西都按预期设计，但在线时它有问题。（本地和在线视图差异很大）我在所有页面标题中的bs之前添加了jquery 我有一

我用bootstrap设计了一个网页，使其具有响应性。当我在我的电脑上检查结果时，一切看起来都很好，但当我把结果上传到服务器上时，网格系统出现了问题。当我在手机上打开它时，不是加载X列-*而是加载sm列-*。当我通过chrome查看页面时，很有趣，在chrome顶部导航栏中，我看到宽度是600px，但它加载的是sm而不是xs

详情如下:

当我在本地检查时，它加载xs abd，所有东西都按预期设计，但在线时它有问题。（本地和在线视图差异很大）

我在所有页面标题中的bs之前添加了jquery

我有一个只包含一个iframe的主页，其他页面都加载在这个iframe中。我已经在包含这个iframe的页面上添加了jaquey和bs

所有页面都将容器类作为主父级

当我用chrome打开网页并将chrome的大小调整到尽可能小的时候，它工作得很好（xs正在工作），但是使用Inspect或real设备它就有问题了

chrome显示此错误：未能解析SourceMap:http://project address on server/css/bootstrap.min.css.map（我尚未将此类库添加到我的项目中）

甚至媒体查询也有问题，正如我提到的，宽度im测试是600px，但媒体查询最大宽度：716px不起作用，而最小宽度：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" />

您使用的是哪个版本的引导？我认为Bootstrap4有一个544px断点，它将触发-sm。您能提供一个JSFIDLE来演示这个问题吗？