必须用 chrome devtools 设备模拟模式验证真实手机布局：先打开开发者工具并点击手机图标启用设备模式，再选择预设机型或自定义华为 mate 60 pro 等参数，关键要填对 dpr 并确认 viewport 标签存在、window.innerwidth 和 devicepixelratio 匹配、横屏旋转及触控正常。
要准确验证网页在 iPhone 15 Pro、Pixel 8 或华为 Mate 60 等真实手机上的布局是否错位、文字是否过小、按钮是否可点，必须用 Chrome DevTools 的设备模拟模式加载完整参数——仅靠拖动窗口或缩放页面，【viewport meta 标签缺失时媒体查询根本不会触发】，也无法模拟设备像素比（DPR）导致的字体发虚、canvas 模糊等问题。
启用设备模拟模式
在 Chrome 中打开任意网页 → 按 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac）打开开发者工具 → 点击左上角手机+平板图标（Toggle device toolbar）。此时界面立即切换为移动端视图，顶部出现设备控制栏。
注意：若该图标不可见，请确认开发者工具处于「Elements」标签页，且整个面板宽度未被压缩到小于 600px——【窗口过窄时图标会自动隐藏】。F12 只打开常规面板，无法激活设备模式。
选择预设手机型号
方法一：点击设备工具栏顶部下拉菜单中「Responsive」右侧的向下箭头 → 从列表中直接选取 iPhone 15 Pro（393×852，DPR=3）或 Pixel 8（412×915，DPR=2.75）。选中后页面自动应用逻辑视口与 UA 字符串，无需刷新。
方法二：点击下拉菜单末尾的「Edit…」→ 在弹出面板中选择「Add custom device」→ 填入名称（如「华为 Mate 60 Pro」）、宽度（3120）、高度（1440）、DPR（3.2）、UA 字符串（Mozilla/5.0 (Linux; Android 13; ALN-AL00) AppleWebKit/537.36）→ 点击「Add」保存。新设备将出现在下拉菜单顶部，下次可一键调用。
这一步的关键是 DPR 必须填对：填错会导致 @media (-webkit-min-device-pixel-ratio: 3) 不命中、canvas 渲染模糊、字体边缘发虚——DPR 是设备固件声明值，不是靠分辨率除法估算出来的。
验证模拟是否生效
第一步：确保页面 HTML 中存在 <meta name="viewport" content="width=device-width, initial-scale=1">。缺失该标签，即使选了 iPhone 15 Pro，@media (max-width: 393px) 也不会匹配。
第二步：在控制台输入 window.innerWidth，确认返回值等于所选设备的逻辑宽度（如 393）；输入 window.devicePixelRatio，确认返回值与设置的 DPR 一致。
第三步：点击设备工具栏右上角旋转按钮，切换横屏 → 观察 window.innerWidth 是否变为对应设备的横屏逻辑宽度（如 iPhone 15 Pro 横屏为 852），同时检查触控交互是否启用（鼠标指针应变为圆点状触控点）。
