Web应用手机端打开、窗口缩放时Media Queries不生效问题咨询

核心排查步骤 #

• 首先补全视口配置标签
  移动端和桌面端缩放时媒体查询读取尺寸异常，90%以上是缺失视口声明导致的。浏览器响应式设计模式会自动注入正确的视口模拟参数，因此测试时表现正常，真机、手动拖拽窗口时会使用浏览器默认的虚拟视口规则，导致尺寸判断完全失准。
  在HTML文件的<head>标签内加入如下代码：

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

  该配置会强制让CSS布局视口宽度与当前浏览器窗口/设备屏幕的实际CSS像素宽度完全匹配，初始缩放值设为1，禁用默认的宽度适配缩放。

• 修正媒体查询的逻辑与书写顺序
  你当前的两个媒体查询是独立平行判断的，当窗口同时满足max-height: 700px和max-width: 1382px时（常见于小屏笔记本、竖屏手机），两条规则会同时命中。CSS同权重规则下，后写的代码会覆盖先写的代码，因此最终始终应用max-width: 1382px对应的290px高度。
  你需要给规则加上明确的区间判断，避免冲突，参考写法：

  /* 先写默认基准样式：宽度>1382px 且 高度>700px时的高度 */
  .your-div {
    height: 350px; /* 按你的实际大尺寸需求修改数值 */
  }
  
  /* 宽度≤1382px 且 高度>700px时，高度290px */
  @media screen and (max-width: 1382px) and (min-height: 701px) {
    .your-div {
      height: 290px;
    }
  }
  
  /* 高度≤700px时，无论宽度多少，高度固定197px（优先级最高的规则放最后） */
  @media screen and (max-height: 700px) {
    .your-div {
      height: 197px;
    }
  }
  

• 校验实际判断尺寸
  桌面端如果开启了系统显示缩放（Windows默认常为125%/150%，MacOS也有对应缩放设置），CSS像素尺寸和物理屏幕尺寸不一致。不要用物理屏幕参数推算媒体查询阈值，打开浏览器控制台执行window.innerWidth、window.innerHeight，输出的两个数值就是媒体查询实际判断的宽高，以这个数值为准调整阈值即可。

• 排查样式权重冲突
  如果目标div的高度写了内联style、或者其他位置的高度规则加了!important标记，会导致媒体查询内的规则被覆盖无法生效。检查对应样式的权重，确保媒体查询内的规则权重不低于默认样式的权重。

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