Chrome inspect工具移动视图无法查看响应式编辑内容怎么办

• 第一步：检查并添加viewport视口标签
  该问题90%以上的场景都是因为HTML文件中缺失视口元标签，缺失时浏览器移动仿真模式会默认按桌面端980px宽度渲染页面再整体缩小，和你遇到的表现完全匹配。你只需要在HTML的<head>区块中添加如下代码即可：

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

参数说明：width=device-width让页面渲染宽度和设备屏幕宽度保持一致，initial-scale=1.0设置初始缩放比例为1，不会默认缩放页面。

• 第二步：校验媒体查询规则写法

  1. 确认断点逻辑正确，移动端样式使用max-width做判断时，数值不要写错
  2. 媒体查询代码要放在同层级普通样式的下方，避免被常规样式覆盖
  3. 在Chrome调试器的样式面板中查找你写的移动端样式，确认移动视图下规则是生效状态，没有被划掉

• 第三步：排查浏览器调试设置问题

  1. 移动仿真模式下，点击顶部工具栏的齿轮图标，确认「自动调整缩放」选项已开启
  2. 按Ctrl+Shift+R（Mac系统为Cmd+Shift+R）强制刷新页面，清除缓存干扰
  3. 确认你选择的仿真设备宽度在你设置的移动端断点覆盖范围内，比如你断点设为768px以下生效，就不要选宽度大于768px的平板设备仿真

问题表现对照 #

• 桌面端实际网站效果
  
• Chrome inspect工具移动视图下的异常效果
  
• 手动缩小窗口后的正常响应式效果
  

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