移动端Chrome浏览器中网站导航栏显示异常求助

嘿，我看了你的代码和问题描述，导航栏在移动端Chrome出问题的根源主要有两个：错误的viewport元标签配置和缺少Bootstrap组件依赖的JavaScript文件，下面一步步帮你解决：

1. 先把Viewport元标签改对 #

你把width=device-width这些响应式布局必需的属性，塞进了X-UA-Compatible的meta标签里，这会让移动端Chrome没法正确识别视口大小，直接搞乱了响应式布局。正确的写法是分开成两个独立的meta标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 补上Bootstrap需要的JS依赖 #

Bootstrap 4的折叠功能（就是移动端那个汉堡按钮）得靠jQuery和Popper.js才能正常工作，你只引入了CSS，没加这些JS文件，这不仅会导致汉堡按钮点了没反应，还可能让导航栏布局错乱。记得在页面底部（</body>标签之前）加上这些：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

另外，你代码里用了Font Awesome的图标（比如<i class="fa fa-home"></i>），但没引入它的CSS，图标会显示不出来，顺手也加上吧：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

修正后的完整代码 #

我把所有问题都修正好了，直接用这个代码测试应该就能正常显示了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font Awesome 图标样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
        <!-- 移动端导航折叠按钮 -->
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 导航栏Logo -->
        <a class="navbar-brand" href="/#">
            <img class="img img-responsive" style="width:48px; height:48px;" alt="logo" src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" />
        </a>
        <!-- 导航链接区域 -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item" id="home-navi">
                    <a class="nav-link" href="/#"><i class="fa fa-home" aria-hidden="true"></i> Home </a>
                </li>
                <li class="nav-item" id="help-navi">
                    <a class="nav-link" id="help" href="/#"><i class="fa fa-question-circle" aria-hidden="true"></i> Help </a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Bootstrap 必需的JS依赖，放在页面底部加载更快 -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
</html>

最后提个小建议 #

测试的时候记得清一下浏览器缓存，确保新的meta标签和JS文件被正确加载。如果还是有问题，检查一下Chrome开发者工具的移动端模拟是不是选对了Samsung Galaxy S5的参数哦～

内容的提问来源于stack exchange，提问作者Sam Clarke