html - 导航栏不会在 iPad 纵向和横向上折叠

Question

我已经使用 bootstrap 编写了一个导航栏，它工作得很好，但是当我在 iPad 上尝试它时，无论是纵向还是横向，它都没有折叠。我尝试更改 @media(我的 bootstrap CSS 文件的最大宽度和最小宽度部分，但仍然无法正常工作。

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://www.linkhere.com/"><img src="../common/images/logo.png" width="120px" height="35px" style="vertical-align:middle"/></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="<?php echo c("news"); ?>"><a href="news.php">News</a></li>
            <li class="dropdown <?php echo c("products,wrapper,consulting") ?>" >
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products / Services <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="<?php echo c("products")?>"><a href="products.php">Overview</a></li>
                <li class="<?php echo c("wrapper")?>"><a href="wrapper.php">Wrapper</a></li>
                <li class="<?php echo c("consulting")?>"><a href="consulting.php">Consulting / Development</a></li>
              </ul>
            </li>
        <li class="dropdown <?php echo c("company,contact,management, careers") ?>">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Company<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="<?php echo c("company")?>"><a href="company.php">About us</a></li>
                <li class="<?php echo c("contact")?>"><a href="contact.php">Contact</a></li>
                <li class="<?php echo c("management")?>"><a href="management.php">Management</a></li>
                <li class="<?php echo c("careers")?>"><a href="careers.php">Careers</a></li>
              </ul>
            </li>
             <li class="dropdown <?php echo c("customers, distributors")?>">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Customers / Distributors <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="<?php echo c("customers.php")?>"><a href="customers.php">Customers</a></li>
                <li class="<?php echo c("distributors.php")?>"><a href="distributors.php">Distributors</a></li>
              </ul>
            </li>
           <li>
                <li class="<?php echo c("news"); ?>"><a href="#">What</a></li>
            </li>
            <li>

        </li>
          </ul>

         <form class="navbar-form pull-left" role="search">
            <div class="input-group">
               <input type="text" class="form-control" placeholder="Search" style="margin-left:20px;">
               <div class="input-group-btn">
                  <button type="submit" class="btn btn-mg" style="background-color:#fff"><span class="glyphicon glyphicon-search" ></span></button>
               </div>
            </div>
         </form>
        </div><!--/.nav-collapse -->
        </div>
    </nav>

Answer 1

将此添加到您的标题部分

 <meta http-equiv="X-UA-Compatible" content="IE-edge">
 <meta name="viewport" content="width = device-with, initial-scale = 1">