Chrome开发者工具切换设备无响应？手动调窗口正常（版本86.0.420.111）

嘿，我之前也碰到过一模一样的问题！结合你用的Chrome 86.0.420.111版本，大概率是下面这几个原因之一，你可以挨个排查：

• 检查设备工具栏的自动缩放设置
  有时候误触关闭了这个选项，DevTools就只会单纯缩放页面，不会真正模拟设备视口来触发媒体查询。你可以点击设备工具栏右上角的三个点（更多选项），看看「Auto-adjust zoom」（自动调整缩放）是否处于勾选状态，没勾的话选上再切换设备试试。

• 确认viewport元标签是否正确设置
  这是响应式布局生效的核心前提！如果你的HTML头部没有正确的viewport标签，DevTools的设备模拟就无法识别真实的视口尺寸，只会做表面缩放。检查下<head>里有没有这段代码：

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

  要是缺失的话，加上后刷新页面，应该就能正常触发CSS的响应式变化了。

• 重置DevTools缓存或重启工具
  Chrome 86这个版本偶尔会出现DevTools缓存异常的小bug。你可以试试：

  • 右键点击DevTools的刷新按钮，选择「Empty Cache and Hard Reload」（清空缓存并硬刷新）
  • 或者直接关闭DevTools重新打开，甚至重启Chrome，很多时候这类小问题重启就能解决。

• 快速校验媒体查询代码逻辑
  虽然你说手动缩小窗口正常，但还是可以快速扫一眼关键媒体查询的写法，比如有没有把max-width和min-width搞混，或者单位使用错误（比如误写了非标准单位）。不过这个可能性相对低，毕竟手动缩放是正常的，但排查下也没坏处。

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