必须用 chrome devtools 设备模拟模式验证真实设备媒体查询、字体清晰度和触控区域——仅拖动窗口或缩放无效，因 viewport meta 标签缺失时媒体查询不触发，且无法模拟 dpr 与 ua 差异。
要准确验证网页在 iPhone 14 Pro、Pixel 7 或 iPad Pro 等真实设备上的媒体查询是否命中、字体是否清晰、触控区域是否足够，必须用 Chrome DevTools 激活设备模拟模式并加载完整设备参数——仅靠拖动窗口或缩放页面，【viewport meta 标签缺失时媒体查询根本不会触发】，也无法模拟 DPR 和 UA 导致的服务端响应差异。
启用设备模拟模式
按 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac）打开开发者工具→点击左上角手机+平板图标（Toggle device toolbar），界面立即切换为可调节的移动端视图。这一步不能用 F12 替代，F12 只打开常规面板，无法激活设备模式。
注意：若该图标不可见，请确认开发者工具处于「Elements」标签页，且整个 DevTools 面板宽度未被压缩到小于 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 一致（如 3 或 2.625）。
第三步：刷新页面后，在控制台执行 navigator.userAgent，检查输出是否包含对应设备标识（如 "iPhone" 或 "Android"），否则服务端可能仍返回桌面版 HTML。
