Question

我正在使用Bootstrap创建一个站点，一切正常，但是当我在iPhone上查看该站点时，导航栏不会崩溃。在我的Windows手机上观看时效果非常好。

以下是我标题的代码，任何人都可以看到为什么会发生这种情况？

<!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 -->

Answer 1

通过添加

解决了此问题

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

到标题

Bootstrap导航栏不会在iPhone上崩溃

1 个答案: