Bootstrap ipad 不像移动设备那样显示答案

【问题标题】：Bootstrap ipad not showing like mobileBootstrap ipad 不像移动设备那样显示
【发布时间】：2017-04-09 14:57:40
【问题描述】：

我刚刚做了一个简单的导航栏，我在手机上看了看，它看起来很正常，像这样：http://prntscr.com/dbjxgd，（移动版）但在我的 iPad mini 2 上它看起来像桌面版，看起来像这样：@ 987654322@ 这是什么原因造成的？我只想让我的 iPad 显示移动版本。你们能帮帮我吗？如果您需要，这是我使用的一些代码：

代码：index.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Servicepunt Detailhandel Groningen | Home</title>
<link rel="shortcut icon" href="images/favicon/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<body>
<!-- NAVIGATIE BALK -->
<nav class="navbar navbar-default" role="navigation">
<!-- logo -->
<div class="navbar-header">
  <!--  -->
  <a class="navbar-brand" href="index.php">
    Logo
  </a>

  <!-- Inklappbaar ding als je op mobiel zit-->
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

<!-- menu eitems  linker kant-->
<div class="collapse navbar-collapse" id="mainnavbar">
  <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="index.php">Home</a></li>
    <li><a href="paginas/Over/index.php">Over</a></li>
    <li><a href="paginas/Nieuws/index.php">Nieuws</a></li>
    <li><a href="paginas/Contact/index.php">Contact</a></li>

    <!-- Dropdown -->
    <!--
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Profiel</a></li>
          <li><a href="#">Instellingen</a></li>
        </ul>
    </li>
    -->
    <!-- <li><button type="button" class="btn btn-primary btn-lg raised">Niet beschikbaar</button></li> -->
  </ul>


  <!-- Aan de rechterkant -->


</nav>

<!-- EINDE NAVIAGTIE BALK-->
HOME



</body>
</html>

代码：style.css

textarea {
font-family: "Verdana";
resize: none;
width: 400px;
height: 50px;
}

label {
font-weight: normal;
}
input {
font-weight: normal;
}

.navbar-default {
background-color: white;
box-shadow: 20px;
padding: 15px;
border-radius: 0;
border: none;
font-size: 25px;
-webkit-box-shadow: 0 5px 3px -2px #999;
    -moz-box-shadow: 0 5px 3px -2px #999;
         box-shadow: 0 5px 3px -2px #999;
}

.navbar-header{
right: auto;
}

.navbar-nav > li{
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: black;
  font-size: 30px;

}

.navbar-default .navbar-nav > li > a {
  color: black;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: black;
  opacity: 0.5;

}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: black;
  background-color: transparent;
}

.navbar-default .navbar-text {
  color: #FFF;
}

.navbar-default .navbar-toggle {
border-color: none;
}

.icon-bar {
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: lightgrey;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: blue;
  width: 40px;
  height: 5px;
  border-radius: 20px;

}

.navbar-collapse {
border: 0px;
}

.navbar-default .navbar-collapse {
color: #e7e7e7;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: transparent;
box-shadow: none;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: blue;
}

我希望你们能帮我解决这个问题。

【问题讨论】：

标签： html ios css twitter-bootstrap ipad

【解决方案1】：

试试这个

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

并在媒体查询下方针对 ipad 使用，请参阅更详细的 here

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

【讨论】：

它可以工作，但只是扩展了它。现在分辨率小于 1200 的人会显示移动版本。我希望有笔记本电脑的人展示桌面，但如果他们在任何移动设备上展示手机？这甚至可以通过引导程序实现吗？我很新，所以我不太了解
是的，你说的是可能的。您必须使用特定于 Ipad 的媒体查询。你可以在这里找到很多：css-tricks.com/snippets/css/media-queries-for-standard-devices
它在纵向模式下工作。在横向模式下，它只是桌面版本。但是如果你用媒体查询来做，它只是说如果你的屏幕小于 1200 像素，它会显示移动版本。我不知道有些笔记本电脑是否更小？但是，如果我使用 1200 像素进行媒体查询，那么拥有那台小型笔记本电脑的人就可以看到移动版本。也许还有其他方法？像这样没关系，但如果你知道我的意思，我想要更安全的东西

【解决方案2】：

您不需要自己添加任何 CSS 代码。您必须使用更新的断点下载引导版本。

转到：http://getbootstrap.com/customize/#grid-system 并将 @grid-float-breakpoint 更改为您希望导航栏折叠的宽度。您可以输入任何像素值。使用@screen-lg-min 或其他任何东西。

然后点击底部的编译下载按钮。

【讨论】：