必须启用开发者工具的设备模拟模式才能准确验证真实设备效果：先按快捷键打开DevTools，点击手机图标启用设备工具栏，再选择预设型号或自定义分辨率与DPR，最后通过viewport标签、window.innerWidth和devicePixelRatio等验证是否生效。
要在桌面端 Chrome 中准确验证网页在 iPhone 15 Pro、Pixel 8 或折叠屏等真实设备上的布局、字体清晰度和媒体查询命中情况，必须通过开发者工具启用完整设备模拟——仅缩放窗口或拖动边框，【viewport meta 标签缺失时媒体查询根本不会触发】，也无法改变 devicePixelRatio 和 UA 字符串，导致服务器返回 PC 版 HTML 或触控区域失效。
启用设备模拟模式
按 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（macOS）打开开发者工具→点击左上角手机+平板图标（Toggle device toolbar）。这一步不能用 F12 替代，F12 只打开常规面板，无法激活设备模式。
【窗口过窄时图标会自动隐藏】：若该图标不可见，请确认开发者工具处于「Elements」标签页，且整个 DevTools 面板宽度未被压缩到小于 600px。
选择预设手机型号
方法一：点击设备工具栏顶部下拉菜单中「Responsive」右侧的向下箭头→从列表中直接选取 iPhone 15 Pro（393×852，DPR=3）或 Pixel 8（412×915，DPR=2.75）。选中后页面自动应用逻辑视口与 UA 字符串，无需手动刷新。
方法二：点击下拉菜单末尾的「Edit…」→在弹出面板中选择「Add custom device」→填入名称（如「内部测试-折叠屏竖屏」）、宽度（2208）、高度（1840）、DPR（3.5）、UA 字符串（Mozilla/5.0 (Linux; Android 14; SM-F946B) AppleWebKit/537.36）→点击「Add」保存。新设备将出现在下拉菜单顶部，下次可一键调用。
手动输入自定义分辨率
第一步：确保已启用设备工具栏（即已看到顶部横条）。
第二步：在设备下拉菜单中选择「Responsive」→顶部出现可编辑的宽高输入框。
第三步：直接在宽度框输入 375，高度框输入 812 → 按回车确认。此时页面视口将严格锁定为该尺寸，但【DPR 仍保持默认 1，若需匹配 iPhone 真实 DPR=3，必须通过 Edit… 添加完整设备配置】，否则 @media (-webkit-min-device-pixel-ratio: 3) 不会命中。
第四步：点击顶部旋转图标切换横屏，观察 media (orientation: landscape) 是否生效。
验证模拟是否生效
① 打开目标网页的 HTML 源码，确认存在 <meta name="viewport" content="width=device-width, initial-scale=1">。缺失该标签，即使选了 iPhone 15 Pro，@media (max-width: 393px) 也不会匹配。
② 在控制台输入 window.innerWidth，确认返回值等于所选设备的逻辑宽度（如 393）；输入 window.devicePixelRatio，确认返回值与所设 DPR 一致（如 3）。
③ 点击设备工具栏右上角三个点 →「More tools」→「Sensors」，启用触控模拟。此时鼠标点击将触发 touchstart 事件，而非 click，可验证移动端交互逻辑是否正常注册。
