Chrome桌面端可通过内置设备模拟器高保真调试移动端显示效果，支持预设机型选择、自定义分辨率、触控与传感器模拟及常用设备固定。
如果您需要在桌面端 Chrome 中预览网页在移动设备上的实际显示效果，但缺乏真实机型或测试环境，则可利用 Chrome 内置的设备模拟器进行高保真调试。该功能支持分辨率、设备像素比、用户代理、触控响应及网络条件的多维模拟。以下是实现移动端分辨率调试的具体操作路径：
一、启用设备模拟模式
设备模拟模式是启动所有移动端调试能力的前提，它将开发者工具切换至响应式视图，并激活设备尺寸控制面板。
1、在 Chrome 中打开目标网页。
2、按下 Ctrl + Shift + I（Windows/Linux） 或 Command + Option + I（macOS） 打开开发者工具。
3、点击开发者工具左上角的 “切换设备工具栏”图标（矩形加斜线），或直接按 Ctrl + Shift + M（Windows/Linux） / Command + Shift + M（macOS） 快速进入设备模式。
二、选择预设移动设备型号
Chrome 预置主流机型参数，包括屏幕宽高、设备像素比（DPR）与对应 User-Agent 字符串，可一键匹配典型移动端渲染环境。
1、在设备工具栏顶部，点击 “Responsive”右侧的下拉箭头。
2、从列表中选取 iPhone 14 Pro、Pixel 5、iPad Pro（12.9-inch）等任一设备。
3、页面自动应用该设备的 viewport 设置与 UA，此时媒体查询、字体缩放、触摸事件绑定均可被真实触发。
三、添加自定义移动端分辨率
当预设设备无法覆盖测试场景（如特定折叠屏比例、老旧安卓机型或定制化嵌入式屏），需手动创建符合需求的分辨率配置。
1、在设备工具栏右上角点击 三个点图标 → “Edit…”。
2、点击 “Add custom device”，填写以下字段：
— Device name：例如“Foldable Test”
— Width：输入宽度值（如 2712）
— Height：输入高度值（如 1808）
— Device pixel ratio：填入 DPR（如 2.8）
— User agent：粘贴对应移动端 UA 字符串（如 Mozilla/5.0 (Linux; Android 13; SM-F936B) AppleWebKit/537.36）。
3、点击 “Add” 保存，新设备即出现在设备下拉菜单中，可随时调用。
四、启用触控与传感器模拟
仅调整尺寸不足以还原真实移动端交互，触控事件、设备方向及地理定位等传感器行为亦影响页面逻辑执行，需主动启用模拟。
1、在设备工具栏右上角点击 三个点图标 → “More tools” → “Sensors”。
2、在 Sensors 面板中，将 “Touch”设为 Enabled，确保页面能捕获 touchstart/touchmove/touchend 事件。
3、返回设备工具栏，点击 “Network”下拉菜单 → 选择“Fast 3G”或“Offline”，验证页面在网络受限下的资源加载与降级策略。
五、固定常用设备至工具栏快捷入口
频繁切换同一设备配置时，将其固定在设备工具栏顶部可避免重复查找，提升调试效率。
1、在设备下拉菜单中，找到已添加的自定义设备名称（如“Foldable Test”）。
2、鼠标悬停于该设备名右侧，点击出现的 星标图标 ★。
3、该设备即被置顶显示于设备工具栏最左侧，点击即可瞬时切换，无需展开下拉菜单。
