bootstrap在移动设备上加载错误的网格

问题描述：

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

透露更多的细节：

当我在本地考察，它加载XS预期ABD一切是在网上，但它的问题。（本地和在线视图差异很大）
我已经在bs之前的所有页面标题中添加了jquery。
我有一个只包含一个iframe的主页，其他页面加载在这个iframe中。我在包含这个iframe的页面上添加了jaquey和bs。
所有页面都容器类为主要父
当我通过Chrome中打开的网页和调整Chrome浏览器尽可能小的，它工作得很好（XS工作），但使用检查或实际设备有问题。
铬显示了这个错误：无法解析SourceMap：HTTP：服务器/ CSS/bootstrap.min.css.map //项目地址（我还没有添加这样的库，我的项目）
甚至有媒体查询有问题，正如我所提到的那样，im的测试宽度是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来证明这个问题吗？ –

答

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

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

bootstrap在移动设备上加载错误的网格

相关推荐