RWD无法用于大屏幕智能手机

时间:2014-10-28 02:03:20

标签: html5 twitter-bootstrap css3 responsive-design

这些狗走了的电话制造商正在努力工作。引入更大的手机导致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>

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

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:2)

好吧,我找到了问题的人。我觉得自己喜欢做一张脸,所以请接受我所说的所有“duh”和“doi”。大声笑这是如何解决它。

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

:摇头:

相关问题