Bootstrap navbar не рушится на iPhone

Я создаю сайт, используя Bootstrap, все работает нормально, но когда я иду, чтобы посмотреть сайт на моем iPhone, навигатор не рушится. При просмотре на моем телефоне с Windows это работает отлично.Bootstrap navbar не рушится на iPhone

Вот код для моего заголовка, может ли кто-нибудь понять, почему это происходит?

<!DOCTYPE html> 
<html <?php language_attributes(); ?>> 

<head> 
    <title><?php wp_title(' | ', true, 'right'); ?></title> 
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" /> 
<?php wp_head(); ?> 
</head> 

<body <?php body_class(); ?>> 
    <!-- Top logo and Search Bar --> 
    <div class="row header navbar"> 
     <div class="container"> 
      <div class="col-md-3 logo-header hidden-xs hidden-sm"> 
       <a href="<?php echo home_url(); ?>/"> 
        <img src="<?php echo bloginfo('template_directory');?>/img/logo.jpg" alt="map consulting Logo" class="img-responsive"> 
       </a> 
      </div> 

      <div class="col-md-3 logo-header hidden-lg hidden-md"> 
       <a href="<?php echo home_url(); ?>/"> 
        <img src="<?php echo bloginfo('template_directory');?>/img/logo.jpg" alt="map consulting Logo" class="img-responsive img-center"> 
       </a> 
      </div> 

      <div class="clear"></div> 

      <div class="col-md-3 pull-right hidden-xs hidden-sm"> 
       <form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>"> 
        <div class="input-group add-on"> 
         <input type="text" class="form-control" placeholder="Search" name="s"> 
         <div class="input-group-btn"> 
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
         </div> 
        </div> 
       </form> 
      </div> <!-- end of col md 3 --> 
      <!-- Navigation for Phone and Tablet - hidden on large screens --> 
      <div class="row hidden-lg hidden-md" id="mobileSearch" style="margin-bottom:10px;"> 
       <div class="col-xs-12"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <div class="col-xs-12"> 
         <?php wp_nav_menu(array('theme_location' => 'main-menu', 
              'depth'   => 1, 
              'container_class' => 'collapse navbar-collapse', 
              'menu_class'  => 'nav navbar-nav')); ?> 

        </div> 
       </div> 
      </div> 
      <!-- Navbar for large screens, hidden when on phone or tablet --> 
      <div class="col-md-4 hidden-xs hidden-sm site-title pull-right"> 
       <div class="navbar-header"> 
        <?php wp_nav_menu(array('theme_location' => 'main-menu', 
             'depth'   => 1, 
             'container_class' => 'nav-large', 
             'menu_class'  => 'nav navbar-nav')); ?> 
       </div> <!-- navbar collapse --> 
      </div> <!-- navbar header --> 
     </div> <!-- col md 4 --> 
    </div> <!-- end of container -->

источник

2015-08-03 pocockn

Fixed эту проблему путем добавления

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

Для заголовка

источник

2015-08-03 09:08:37 pocockn

Bootstrap navbar не рушится на iPhone

ответ

Смежные вопросы