Bootstrap-Navbar在移动设备上显示不同

Question

我为网页和移动设备编写了一个网站，并将其上传到域名。但是，我的智能手机上的导航栏不想折叠，如果我调整浏览器大小到相同的尺寸，它就完美地工作了（请看屏幕截图）。 页面的移动设备截图 页面的PC截图 这是我的导航栏代码片段：

    <nav class="navbar navbar-default  navbar-fixed-top"  role="navigation">
        <div class="container-fluid">

            <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" 
                            data-toggle="collapse" data-target="#myNavbar-1" 
                            aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>

                <a class="navbar-brand" href="/">PageName</a>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar-1">

                <ul class="nav navbar-nav hidden-sm hidden-xs">


...(some tabs)
                </ul>

                <ul class="nav navbar-nav pull-right hidden-sm hidden-xs">
...(some tabs)
                </ul>

                <ul class="nav navbar-nav visible-sm visible-xs">


...(some tabs)
                </ul>

            </div>

        </div>
    </nav>

编辑解决方案：我忘记添加了

<meta name="viewport" content="width=device-width, initial-scale=1">

标签。现在它正常工作。

- Dexkill

---

你的头部是否定义了viewport meta标签，例如<meta name="viewport" content="width=device-width, initial-scale=1">？（如果没有，请阅读相关文档。） - Serlite

@Serlite 那就是解决方案，我知道我忘了什么...谢谢！ - Dexkill

可能是重复的问题：响应式网页设计在桌面上可以工作，但在移动设备上无法工作。 - Serlite

Answer 1

事实上，Bootstrap 是面向移动端的。移动端优先的样式可以在整个库中找到，而不是在单独的文件中。

为了确保正确的渲染和触摸缩放，请将 viewport meta 标签添加到 head 部分：

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备上，您可以通过在视口元标记中添加user-scalable=no来禁用缩放功能。这将禁用缩放，意味着用户只能滚动，并使您的网站感觉更像本地应用程序。总的来说，我们不建议在每个网站上使用此功能，所以请谨慎使用！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

- user1556571