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

Bootstrap-Navbar在移动设备上看起来不同

1 个答案: