html - 大屏幕智能手机的 RWD 失败

Question

这些狗走的手机制造商让我们的工作更加困难。更大手机的引入导致 Bootstrap RWD 响应为平板电脑而不是手机。有时这不是什么大问题，因为确实发生了响应，但下拉菜单(汉堡菜单)无法显示并强制它过早打开，这也不正确。那么在横屏模式下使用较小的平板电脑或手机时，您会遇到同样的问题。

我的意思是:

这是我设计它来寻找 col-xs-12 的方式，而我却让 col-sm-12 在手机中呈现为图像进一步显示在下方。 “如果汉堡包菜单不显示怎么办”，你会说。常规菜单在手机中仍然太小，难以点击。

这是我用于 header 的代码

    <header>
    <div class="header">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">MENU</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"><img src="images/banner.png" alt="banner" /></a>
                </div>

                <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav" id="navigation">
                        <li class="active"><a href="/">Home</a></li>
                        <li><a href="about.php">about</a></li>
                        <li><a href="testimonials.php">testimonials</a></li>
                        <li><a href="services.php">services</a></li>                
                        <li><a href="contact.php">contact</a></li>    
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</header>

任何人都知道如何解决这个问题。

Answer 1

好吧，我找到了问题所在。我想做一个面部手掌，所以拜托，我接受你扔给我的所有“duh”和“doi”。大声笑这是修复它的方法。

添加<meta name="viewport" content="width=device-width, initial-scale=1">到了头，瞧!

:摇摇头: