使用JavaScript加载Header后responsive.css失效的解决求助

我用模板开发了多语言网站，通过jQuery的load()方法统一加载header.html和footer.html来简化维护。桌面端显示正常，但移动端中header和footer的responsive.css完全失效，导航栏等响应式功能无法使用。

问题根源分析 #

1. jQuery版本冲突：页面头部加载了jQuery 3.3.1，底部又重复引入jQuery 3.1.1，后者会覆盖前者，导致动态加载完成后Bootstrap组件初始化逻辑失效。
2. 动态内容未初始化组件：用load()加载的HTML包含Bootstrap下拉菜单、折叠导航等组件，这些组件需要在内容加载完成后重新初始化，否则响应式行为无法触发。
3. 重复ID导致样式/逻辑异常：header.html里存在重复的id="primary-navigation"和id="agency-navbar-collapse"，重复ID会干扰CSS选择器匹配和JS执行逻辑。
4. viewport标签配置不完整：原标签缺少initial-scale=1.0，可能导致部分移动端浏览器渲染异常。

具体修复步骤 #

1. 移除重复的jQuery引入

删除页面底部的<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>，仅保留头部的jQuery 3.3.1，并在load()回调中初始化组件：

<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"
>
</script>
<script> 
$(function(){
    $("#header").load("header.html", function() {
        // 加载完成后初始化Bootstrap组件
        $('#header').find('[data-toggle="dropdown"]').dropdown();
        $('#header').find('.collapse').collapse();
    }); 
    $("#footer").load("footer.html"); 
});
</script>

2. 修复header.html中的重复ID

删除header.html中第一个多余的导航块，确保ID唯一：

<header id="masthead" class="site-header">
    <nav id="primary-navigation" class="site-navigation">
        <div class="container">
            <div class="navbar-header">
                <a href="https://112ops.cat/eng/index.html" class="site-title"><span>112</span>-OPS</a>
            </div><!-- /.navbar-header -->

            <div class="collapse navbar-collapse" id="agency-navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="https://112ops.cat/eng/index.html">Home</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">The Group<i class="fa fa-caret-down hidden-xs" aria-hidden="true"></i></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                          <li><a href="normativa.html">Regulations</a></li>
                          <li><a href="/eng/pilotlist.php">Pilot List</a></li>
                          <li><a href="https://wiki.es.ivao.aero/shelves/ops-especiales">Training</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Operations<i class="fa fa-caret-down hidden-xs" aria-hidden="true"></i></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                          <li><a href="/eng/flightlog.php">Last Flights</a></li>
                          <li><a href="/eng/reporte.php">Report a flight</a></li>
                        </ul>
                    </li>
                    <li><a href="/eng/registro.php">Register</a></li>
                    <li><a href="/eng/contacto.html">Contact</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Language<i class="fa fa-caret-down hidden-xs" aria-hidden="true"></i></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                            <li><a href="/ca/index.html"><img src="../assets/img/senyera.png" alt="Senyera" width="22px" height="15px"> Català</a></li>
                            <li><a href="/es/index.html"><img src="../assets/img/espana.png" alt="Espana" width="22px" height="15px"> Castellano </a></li>
                            <li><a href="/eng/index.html"><img src="../assets/img/british.png" alt="English" width="22px" height="15px"> English </a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>   
    </nav><!-- /.site-navigation -->
</header><!-- /#mastheaed -->

3. 完善viewport元标签

调整viewport标签，确保移动端渲染正常：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

4. 验证CSS路径正确性

确认responsive.css的引用路径../assets/css/responsive.css?v=1.10在所有语言子目录（如/eng/、/es/）下都能正确访问，若路径错误需修正为相对当前页面的正确路径。

内容的提问来源于stack exchange，提问作者oriol civit