CSS响应式页面部署服务器后媒体查询不生效问题咨询

问题现象 #

• 纯HTML+CSS实现的响应式首页，本地运行时响应式效果完全正常
• 交付文件后，无论本地直接打开还是通过FileZilla上传到服务器部署，页面均无响应式效果，媒体查询规则完全不生效
• 未修改任何源文件的前提下，访问线上部署地址时，本地设备打开也无法触发响应式效果
• 项目为老旧站点改造，不允许使用额外第三方库，未引入Sass等预处理器
• 线上地址：测试页面

现有代码 #

HTML头部代码 #

<head>
  <title>Alpha</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <link href="styles.css" type="text/css" rel="stylesheet">
</head>

基础样式代码 #

.navbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #c91111;
}

.navbar button{
  margin-right: 25px;
}
  
.navbar img{
  height: 4rem;
  width: 19rem;
  margin: 10px;
  background-color: white;
}

响应式适配代码 #

@media screen and (max-width: 270px) {
  .navbar button{
    width: 6rem;
    font-size: 13px;
  }

  .menu_item{
    justify-content: flex-start;
    width: 11rem;
    height: 15rem;
  }

  .menu_item_4{
    height: 17rem;
  }

  .menu_item a{
    padding: 1rem;
    font-size: 16px;
  }

  .mobile-item{
    padding: 0 !important;
  }
}

问题原因与修复方法 #

1. viewport元标签配置语法错误 #

这是导致媒体查询完全失效的核心原因。当前代码中viewport的content属性存在两处语法错误：

• 属性名拼写错误：minimumscale、maximumscale缺少连字符，正确属性名为minimum-scale、maximum-scale
• 分隔符使用错误：viewport配置的每组键值对必须用逗号分隔，当前代码在initial-scale=1.0后错用分号，导致整个viewport配置被浏览器忽略，页面会按默认的980px桌面视口渲染，无法匹配设备宽度触发媒体查询。

修正后的viewport标签：

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

2. 媒体查询断点设置不合理 #

当前媒体查询的触发条件为max-width: 270px，主流消费级移动设备的视口宽度最小为320px，常规手机视口宽度在320px-480px区间，270px的阈值过小，普通设备下根本无法触发对应样式。
可根据设计需求调整断点，常规适配参考断点：

• 平板及以下设备：max-width: 768px
• 手机端设备：max-width: 576px
• 超小屏设备可额外补充max-width: 320px的适配规则

额外缓存排查 #

如果修正代码上传后仍不生效，可在引用CSS文件时增加版本参数避免旧缓存干扰：

<link href="styles.css?v=2" type="text/css" rel="stylesheet">

同时清空浏览器缓存、检查CDN/服务器缓存规则即可。

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