激活触屏事件按钮后媒体查询(media query)失效问题排查求助

修复方案 #

1. 补全viewport meta标签配置 #

首先确认你头部的viewport配置是否完整，缺少maximum-scale和user-scalable参数是触发该问题的最常见原因，正确配置如下：

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

开启触屏模拟后，浏览器默认会允许手势缩放操作，哪怕你在自适应视图下固定了屏幕尺寸，未做限制的viewport会自动拉伸适配触摸操作的缩放阈值，导致视口尺寸和实际展示尺寸不一致。

2. 调整媒体查询匹配规则 #

如果你的媒体查询仅用了max-width，部分浏览器在触屏模拟模式下会优先匹配物理设备宽度而非当前视图的CSS像素宽度，可以将媒体查询调整为同时匹配两种宽度规则：

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
  /* 原有移动端适配逻辑 */
}

3. 排查touch事件冲突 #

检查全局JS代码中是否存在绑定了touchstart/touchmove事件的监听函数，是否错误调用了preventDefault()阻止了浏览器默认视口调整行为，尤其是针对iOS设备做的兼容代码，很容易误拦截正常的视口适配逻辑。

4. 强制重置视口配置 #

如果以上方案都无效，可以在触屏事件触发时强制重置viewport配置，避免JS动态修改了视口参数：

const viewport = document.querySelector('meta[name="viewport"]');
document.addEventListener('touchstart', () => {
  viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
}, { passive: true });

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