在真实设备上验证 CSS 媒体查询是否命中、字体清晰度够不够、触控区域大小是否合适，很多人习惯直接拖动浏览器窗口或者缩放页面。

但这其实是个典型的误区。只要 viewport meta 标签缺失，媒体查询根本不会触发，更别提 DPR 和 UA 这些参数对服务端响应的影响了。

真正靠谱的做法，是使用 Chrome DevTools 的设备模拟模式，把 iPhone 14 Pro、Pixel 7 或 iPad Pro 的完整设备参数加载进来，才能准确验证。

启用设备模拟模式

按 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac）打开开发者工具。

点击左上角的手机和平板图标（Toggle device toolbar），界面会立即切换成可调节的移动端视图。

注意：F12 只能打开常规面板，没法激活设备模式。如果图标不可见，先确认开发者工具处于「Elements」标签页，并且整个面板宽度没有被压缩到 600px 以下——窗口太窄时图标会自动隐藏，这点很容易忽略。

选择预设设备型号

有两种方式可以选设备。

• 第一种：点击设备工具栏顶部下拉菜单中「Responsive」右侧的向下箭头，直接找到 iPhone 14 Pro（390×844，DPR=3）或 Pixel 7（412×915，DPR=2.625）。选中后页面会自动应用逻辑视口和 UA 字符串，不需要手动刷新。
• 第二种：点击下拉菜单末尾的「Edit…」，在弹出面板中选择「Add custom device」。然后填入名称（比如「内部测试-折叠屏竖屏」）、宽度（2208）、高度（1840）、DPR（3.5）、UA 字符串（Mozilla/5.0 (Linux; Android 14; SM-F946B) AppleWebKit/537.36）。点击「Add」保存。下次就能在下拉菜单顶部直接调用这台自定义设备了。

这里面最关键的是 DPR 必须填对——填错了，@media (-webkit-min-device-pixel-ratio: 3) 就不会命中，canvas 渲染会模糊，字体边缘也会发虚。

DPR 是设备固件的声明值，不是靠分辨率和屏幕尺寸估算出来的，这一点需要特别留神。

验证模拟是否生效

选完设备后，需要确认模拟已经真正生效。请按以下三步检查：

• 第一步：检查页面 HTML 中是否包含 。标签缺失的情况下，即便选了 iPhone 14 Pro，@media (max-width: 390px) 也不会匹配。
• 第二步：在控制台输入 window.innerWidth，看返回值是否等于设备的逻辑宽度（比如 390）。再输入 window.devicePixelRatio，看是否与设置的 DPR 一致。
• 第三步：点击设备工具栏右上角的「」→「More tools」→「Sensors」，启用 Touch 模拟，顺便检查一下 UA 字符串是否已经正确更新。

做完这三步，基本就能确保模拟环境与真实设备一致了——剩下的就是放心地在移动端布局上测试细节，不用再担心媒体查询不命中或字体发虚这类问题。

《夸克》非常好用的免费AI浏览器

下载APP查看