CSS媒体查询在浏览器调试正常但实际移动设备不生效，viewport是否正确

视口配置校验 #

你提供的viewport配置语法不存在错误，但存在适配层面的优化空间：user-scalable=yes允许用户手动缩放页面，部分旧版本移动浏览器在用户触发缩放后会导致媒体查询判断的视口宽度偏移，若业务无强制允许缩放的需求，建议调整配置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">

新增的viewport-fit=cover属性可适配刘海屏、挖孔屏等异形屏设备的展示效果。

媒体查询移动端不生效的常见原因 #

• 媒体查询语法错误
  注意and关键字前后必须保留空格，否则部分浏览器会识别失败，同时不要写反min-width和max-width的判断逻辑：
  错误示例：@media screen and(max-width:768px)
  正确示例：@media screen and (max-width: 768px)
  面向移动端的窄屏适配通常用max-width作为断点判断条件，不要混用device-width和普通width做判断，推荐统一使用width匹配视口宽度。
• 标签位置错误
  确认viewport的meta标签写在HTML的<head>区块内，不要放到<body>中，否则部分移动浏览器不会识别该配置。
• 样式优先级冲突
  媒体查询的样式需要写在对应普通样式的后方，避免被层叠规则覆盖；如果使用了CSS框架或预处理器，可临时给不生效的样式添加!important标记，验证是否为优先级问题。
• 移动端缓存问题
  移动端浏览器、APP内置webview通常会强制缓存静态资源，调试时可清空移动端缓存，或给CSS文件添加版本号后缀（如index.css?v=20240520）强制拉取最新资源。
• 断点设置不匹配
  部分安卓设备、折叠屏设备的实际视口宽度和浏览器模拟值存在差异，可添加临时调试代码打印实际视口宽度，确认是否匹配你设置的断点：

  alert('当前视口宽度：' + document.documentElement.clientWidth)
  

• 横屏适配缺失
  若用户以横屏模式访问页面，未匹配横屏规则的媒体查询也会失效，可补充横屏相关的判断逻辑。

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