innerWidth与屏幕尺寸不匹配 MediaQueries断点无法触发问题求助

你遇到的媒体查询不触发、页面innerWidth固定为980px的问题，完全是由viewport元标签的语法错误导致的：移动端浏览器在未识别到有效viewport标签时，会默认以980px宽度渲染页面再缩放适配屏幕，因此永远无法触发小屏断点。

具体错误点 #

• viewport元标签的声明属性错误：你写的是type="viewport"，正确属性应为name="viewport"
• viewport的content参数分隔符错误：参数键值对需用=连接，而非:，你写的width:device-width、initial-scale:1.0均为错误写法

修正方案 #

将原有错误的viewport标签替换为以下正确代码即可：

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

可选排查项 #

如果修改后仍存在异常，可按以下顺序排查：

• 确认浏览器开发者工具的移动模拟功能已开启视口适配，部分旧版本浏览器需要手动勾选「自动调整视口」选项
• 清除浏览器缓存后重新加载页面，避免本地缓存的旧代码影响验证
• 检查是否有其他外部JS代码强制修改了viewport属性或页面宽度

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