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

标签。现在它工作正常。

Answer 1

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

为确保正确渲染和触摸缩放，请将视口元标记添加到您的头部：

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