移动端页面写完，在电脑上按 Ctrl+Shift+M 切成手机尺寸，看着挺正常。发到真机上，底部按钮被浏览器工具栏压住，输入框一聚焦整页跳一下。设备模拟好用，但它只模拟了一部分东西。

它改的是视口和 UA

设备模式会按你选的机型设置视口宽度、像素比和 User-Agent，页面里的媒体查询、vw 单位因此能按预期生效。布局错位、横向滚动、文字溢出这类问题，用它查效率最高，还能顺手把网络限成慢速，看加载顺序。改完尺寸记得刷新一次，有的样式只在加载时计算。

内核和触摸它模拟不了

电脑上跑的还是桌面版内核，手机上的 Safari 和各家安卓浏览器，渲染细节有差别。1px 边框在某些像素比下变粗、全屏高度被地址栏吃掉一截、底部固定条在软键盘弹出时乱飘，这些只有真机才复现。

  • 勾上触摸模拟，鼠标会变成手指，但多点触控和手势仍然测不了。
  • 设备列表可以自己加分辨率，注意同时改像素比，不然截图比例不对。
  • 真要调手机上的页面，用数据线连电脑走远程调试，比截图来回传快。
  • 模拟器里的滚动条样式和真机不同，别照着它调间距。

还有一层容易忽略：有的站点在服务端读 UA 判断设备，返回的 HTML 结构都不一样。设备模式改了请求头，但页面缓存还在，看到的可能仍是电脑版结构。打开网络面板，看第一条文档请求的请求头里 UA 有没有变，再决定要不要硬刷新。

怎么配合着用

开发阶段用设备模式快速迭代，改一版看一版。提测前至少过两台真机，一台 iOS 一台安卓，重点看表单、弹层和首屏高度。上线后再用真机看一次加载，模拟环境里的网速和真实移动网络差得远，弱网下的白屏时间才是用户真正感受到的。

交付截图也有讲究。设备模式开着，截出来是带机型边框的图，不适合放进文档。再按一次 Ctrl+Shift+M 关掉工具栏，用开发者工具里的捕获截图，出来的才是干净页面。缩放比例不是 100% 时，1 像素的边框会显示成两像素，别照着这个判断线条粗细。

把它当成快速的布局检查工具，别当成真机替代品。省下的时间是真省，漏掉的问题也是真漏。