移动端访问时footer区Media query不生效 浏览器缩放时规则正常

• 优先检查HTML入口文件<head>标签内是否添加了移动端视口配置
  这是导致该问题的最常见原因：未配置视口标签时，移动端浏览器会默认以980px的桌面宽度渲染页面，你写的针对小屏的媒体查询规则无法命中，自然不会生效，就会出现桌面端手动缩放宽高正常、真实手机访问样式异常的情况。正确的视口配置如下：

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

• 检查媒体查询规则的优先级和书写规范
  确认移动端适配的媒体查询代码统一放在样式表末尾，避免被前面的桌面端样式覆盖；同时检查是否存在语法错误，比如漏写px单位、混淆min-width和max-width的逻辑。
• 排查移动端缓存问题
  部分手机浏览器会默认缓存旧的静态资源，你可以清理手机浏览器缓存后重新访问，确认是否是缓存导致的旧样式未更新。
• 验证CSS特性兼容性
  检查footer相关样式是否用到了目标手机浏览器不支持的CSS新特性，可通过手机端远程调试查看footer元素的样式加载状态，确认媒体查询是否正常命中。

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