移动端@media (max-width: 640px) 媒体查询不生效问题咨询

• 缺少视口元标签：Codepen平台默认会自动注入<meta name="viewport" content="width=device-width, initial-scale=1.0">，但你自行部署的页面大概率漏加了该标签。缺少该标签时移动端浏览器会默认使用虚拟视口（通常宽度为980px）渲染页面，远大于640px的断点阈值，自然不会触发移动端适配规则。
• CSS规则优先级问题：如果你的媒体查询代码写在全局通用CSS之前，媒体查询内的样式会被后面的同优先级规则覆盖；也可能是线上打包环节将CSS压缩合并时，打乱了样式顺序，导致移动端规则优先级低于桌面端规则。
• 语法或打包错误：检查媒体查询语法是否正确，标准写法为@media screen and (max-width: 640px)，注意不要遗漏括号、and前后的空格；部分CSS压缩工具可能存在兼容性问题，会错误修改断点数值或者过滤掉媒体查询规则。
• 固定宽度干扰：检查html、body或者最外层容器是否被设置了固定宽度（比如写死width: 1200px），固定宽度会撑大视口，导致媒体查询无法正确匹配移动设备宽度。
• 浏览器缓存问题：iPhone Safari的缓存机制比较顽固，你可以尝试开启隐私模式访问线上页面，或者清空浏览器缓存后重新加载，避免加载到旧版本的CSS文件。
• JS逻辑干扰：排查站点内是否有JS代码动态修改视口参数、强制设置页面缩放比例，这类逻辑在Codepen测试环境不会生效，部署后会干扰媒体查询的正常匹配。

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