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

这些走狗的电话制造商使我们的工作更加艰辛。更大手机的引入导致Bootstrap RWD以平板电脑而不是手机的形式响应。有时候这不是什么大不了的事情，因为确实发生了响应，但是下拉菜单（汉堡菜单）无法显示并迫使其过早打开，这也不对。然后，在横向模式下使用较小的平板电脑或手机会遇到相同的问题。

这是我的意思：

这是我设计它查找col-xs-12的方式，相反，随着下面进一步显示的图像，我将col-sm-12渲染到手机中。 “那么如果不显示汉堡菜单怎么办”，您会说。常规菜单在手机中仍然太小，很难点击。

这是我用于标题的代码

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

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

最佳答案

好吧，我发现问题的人。我想做个掌心动作，所以请接受我丢下的所有“ duh”和“ doi”。大声笑这里是如何解决它。

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

：摇我的头：

关于html - 大屏幕智能手机的RWD失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26599775/