必须启用开发者工具的设备模拟模式才能真实还原手机端渲染效果；仅手动缩放无效，需通过Toggle device toolbar激活，设置预设或自定义设备参数（含DPR、UA、分辨率），否则媒体查询不触发、字体模糊、服务器返回PC版HTML。
要在桌面版 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) 是否生效。
