必须同时满足屏幕尺寸、DPR、UA字符串与触摸事件四大条件才能准确验证网页在真实手机型号下的显示效果和触控逻辑。
要在电脑上准确验证网页在 iPhone 14 Pro、Pixel 7 或 iPad Air 等真实手机型号下的显示效果和触控逻辑，必须同时满足屏幕尺寸、DPR、UA 字符串与触摸事件四大条件，缺一不可。
启用设备模拟模式
在 Chrome 中打开目标网页，右键空白处 → 选择「检查」，或直接按 Ctrl + Shift + I（Windows/Linux）/Cmd + Option + I（Mac）打开开发者工具。
点击左上角手机+平板图标（Toggle device toolbar），界面立即切换为移动端视图——这一步不能跳过，误按 F12 只会打开常规面板，无法触发设备级渲染逻辑。
此时页面顶部出现设备工具栏，图标变为蓝色，表示已进入设备模拟模式。
选择预设手机型号并验证响应式生效
方法一：点击设备工具栏顶部下拉菜单中「Responsive」右侧的向下箭头，从列表中选择目标设备，例如 iPhone 14 Pro（390×844，DPR=3）或 Pixel 7（412×915，DPR=2.75）。
选中后页面自动应用对应逻辑视口与 UA 字符串，无需刷新；但媒体查询是否命中，取决于页面是否含有 ——若缺失该标签，@media (max-width: 390px) 将完全不匹配。
方法二：点击旋转按钮（↻）切换横竖屏，强制触发 @media (orientation: landscape) 等方向相关规则。
手动添加自定义手机设备
第一步：点击设备工具栏右上角「⋯」→「Edit…」→「Add custom device」。
第二步：填写名称（如「内部测试机-414x896」）、宽度（414）、高度（896）、设备像素比（2）、用户代理字符串（例：Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1）。
第三步：点击「Add」保存。新设备即刻出现在下拉菜单中，下次可直接调用。
关键提醒：DPR 必须填对——填错会导致 touchstart 事件不触发、canvas 渲染模糊、字体发虚，且 @media (-webkit-min-device-pixel-ratio: 2) 不命中。
启用触摸事件与传感器模拟
仅调整尺寸无法还原真实交互。点击设备工具栏右上角「⋯」→「More tools」→「Sensors」。
在 Sensors 面板中，勾选「Touch events」——这一步是硬性前提，否则所有 touchstart/touchmove/touchend 监听器都不会被触发。
可进一步设置「Orientation」为「Landscape left」或「Portrait upside down」，验证页面是否响应设备方向变化。
