Chrome Dev Tools响应式模式故障：仅显示左上角1/4区域求助

老兄，你这个问题确实有点顽固——连卸载重装Chrome都试过了还没搞定，不过结合你用的是macOS+Chrome 65的环境，我给你几个针对性的排查修复方案，你可以挨个试试：

• 重置DevTools至默认配置
  大概率是DevTools的配置文件出了损坏，导致布局逻辑异常：

  1. 打开DevTools，点击右上角的三点菜单按钮
  2. 选择「Settings」（或者直接按F1快捷键）
  3. 拉到页面最底部，点击「Restore defaults and reload」按钮
     等DevTools重新加载完成后，再切换到响应式模式看看效果。

• 排查macOS系统显示缩放设置
  macOS的显示缩放比例有时候会和Chrome DevTools的渲染逻辑冲突：

  1. 打开系统偏好设置 → 显示器
  2. 查看当前的「缩放」选项，是不是选了非默认的自定义比例（比如「看起来像1680x1050」这类）
  3. 临时切换到「默认 for display」，然后重启Chrome再测试响应式模式
     如果恢复正常，再调回原来的缩放比例就行——有时候系统和浏览器的缩放同步会出临时bug，重启就能解决。

• 尝试禁用GPU加速启动Chrome
  硬件加速可能和你的系统/显卡驱动不兼容，导致渲染异常：

  1. 关闭所有Chrome窗口
  2. 打开「终端」，输入以下命令并回车：

     open -a "Google Chrome" --args --disable-gpu
     

  3. 打开Chrome后再启动DevTools响应式模式测试
     如果这个方法有效，你可以在Chrome设置的「系统」板块里，关闭「使用硬件加速模式（如果可用）」，之后重启Chrome就不用加参数也能正常使用了。

• 彻底清理Chrome用户配置文件
  重装Chrome时，用户配置文件可能没被完全删除，导致问题残留：

  1. 关闭Chrome
  2. 打开访达，按下Command+Shift+G，输入~/Library/Application Support/Google/Chrome并回车
  3. 把「Default」文件夹重命名为「Default_old」
  4. 重新打开Chrome，它会生成全新的默认配置文件，再测试DevTools

这些方案都是针对你这个场景的，按顺序试下来应该能解决问题。

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