如何让CSS media queries仅在415px以下设备生效 桌面端不触发

• 首先在页面<head>标签内添加viewport配置，这是媒体查询正确判断设备宽度的基础：

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

• 检查CSS语法错误：重点排查该媒体查询上方的其他CSS规则是否漏写闭合大括号}，或当前媒体查询自身是否漏写闭合大括号，导致规则作用范围异常。
• 排查全局样式是否已经定义了同名.anchor-offset规则，若全局存在相同的样式定义，所有宽度下都会应用该样式，和媒体查询本身无关联。
• 如果使用Less/Sass等CSS预处理器，检查嵌套层级是否正确，避免媒体查询被错误嵌套在其他规则内部，导致匹配范围异常。
• 确认当前测试环境的实际视口宽度，在浏览器控制台执行console.log(window.innerWidth)查看实际数值，浏览器缩放、开发者工具模拟设备的自定义宽度设置，都可能导致实际计算的视口宽度小于415px，触发媒体查询。
• 可调整媒体查询边界值，同时提高样式优先级避免被其他规则覆盖：

  @media only screen and (max-width: 414px) {
     .anchor-offset {
          height: 80px !important; 
          margin-top: -80px !important; 
        }
  }
  

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