拖动窗口响应式正常，inspect element手机视图无响应问题

我开发的旅行网站用Media Queries和Bootstrap类实现响应式布局，拖动窗口边角调整大小时响应式效果正常，但用开发者工具（Inspect Element）调整页面时，页面只会缩小，不会触发响应式效果。

页面状态截图 #

• 未调整时的首页：
• 拖动窗口调整后的首页：
• 使用开发者工具调整后的首页：

首页HTML代码 #

<!DOCTYPE html>
<html>
    <head>
      <title>Home</title>
        <link rel="stylesheet" type="text/css" href = "C:\Users\Lenovo User\Documents\uwe_code\Webdev_coursework\styles.css"/>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!--nav bar-->
        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#HTNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
              </button>
              <a class="navbar-brand" href="home.html">Horizon Travels</a>
            </div>
            <div class="collapse navbar-collapse" id="HTNavbar">
              <ul class="nav navbar-nav">
                <li class="active"><a href="home.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="register.html"><span class="glyphicon glyphicon-user"></span> Register</a></li>
                <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><img src="C:\Users\Lenovo User\Documents\uwe_code\Webdev_coursework\Images\logo.jpg" alt="logo" style="width:40px;"></li>
              </ul>
            </div>
          </div>
        </nav>
        <br><br><br><br>
        
        <!--travel options-->
        <div class="homeBox container-fluid">
          <br><br>
          <a href="planeBookings.html">View Plane Bookings</a>
        </div>
        <div class="homeBox container-fluid">
          <br><br>
          <a href="trainBookings.html">View Train Bookings</a></div>
      <div class="homeBox container-fluid">
        <br><br>
        <a href="coachBookings.html">View Coach Bookings</a>
      </div>

      <div class="footer container-fluid" style="text-decoration:none; position:fixed;">
        <br>
        <p>© 2022 Horizon Travels. All rights reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="privacystatement.html">Privacy Statement</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Horizon Travels</p>
      </div>
    </body>
</html>

样式表（styles.css）代码 #

.register-form {
    border: 2px solid;
    margin: auto;
    background-color: black;
    box-sizing: border-box;
    color: grey;
    opacity: 0.8;
}

.register-form-container {
    box-sizing: content-box;
    height: 725px;
    width: 1000px;
    color: white;
    text-align: center;
    font-weight: bold;
    background-color: black;
    opacity: 0.95;
}

.login-form-container {
  box-sizing: border-box;
  height: 375px;
  width:1000px;
  color: white;
  text-align: center;
  font-weight: bold;
  background-color: black;
  opacity: 0.95;

}

body {
    background-image: url('https://tahititourisme.uk/wp-content/uploads/2017/08/ICThalasso_030718_0751_HD%C2%A9RomeoBalancourt-1920px.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 400px) {
    /* For mobiles: */
    .col-x-1 {width: 8.33%; font-size: 6px;}
    .col-x-2 {width: 16.66%;}
    .col-x-3 {width: 25%;}
    .col-x-4 {width: 33.33%;}
    .col-x-5 {width: 41.66%;}
    .col-x-6 {width: 50%;}
    .col-x-7 {width: 58.33%;}
    .col-x-8 {width: 66.66%;}
    .col-x-9 {width: 75%;}
    .col-x-10 {width: 83.33%;}
    .col-x-11 {width: 91.66%;}
    .col-x-12 {width: 100%;}
}

@media only screen and (min-width: 700px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%; font-size: 13px;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 900px) {
    /* For desktop: */
    .col-1 {width: 8.33%; font-size:20px;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

  .homeBox {
    border: solid 1px;
    margin-right: 200px;
    background-color: black;
    color: white;
    height: 100px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    opacity: 0.9;
  }
  
  .footer {
    bottom: 0;
    left:0;
    width: 100%;
    background-color: white;
    color: black;
    opacity: 0.8;
  }

问题原因及修复方案 #

1. 缺失viewport元标签（核心问题） #

Bootstrap和自定义Media Queries在移动端调试时，必须依赖<meta name="viewport">标签识别设备视口。你的HTML头部没有添加这个标签，导致开发者工具模拟移动设备时，浏览器仍以桌面视口渲染页面。

修复： 在<head>标签内添加：

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

2. Bootstrap版本不兼容 #

你同时引入了Bootstrap 3.4.1的CSS和Bootstrap 4.0.0-alpha.6的JS，版本不匹配会导致折叠导航等组件功能异常，也可能干扰响应式逻辑。

修复：

• 统一使用Bootstrap 3的JS：替换JS链接为对应版本

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

• 或完全迁移到Bootstrap 4（推荐），同步更新CSS和JS链接。

3. 自定义Media Queries未应用 #

你写的自定义列类（.col-x-*、.col-m-*等）没有在首页HTML中使用，当前页面仅依赖Bootstrap的容器和导航组件实现响应式。后续布局需正确应用这些自定义类，才能触发你定义的Media Queries效果。

4. 调试操作注意事项 #

打开开发者工具的设备模拟模式后，必须刷新页面，确保浏览器重新读取视口设置并应用响应式样式。

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