使用Chrome开发者工具可模拟移动设备查看网页响应式效果。首先通过快捷键或右键打开开发者工具，点击设备图标进入设备模式；随后选择预设设备如iPhone 15 Pro，或自定义分辨率与像素比；支持切换横竖屏、调整缩放比例及拖动视口测试断点；还可通过Network面板模拟Slow 3G等网络环境以评估加载性能。
如果您需要测试网页在手机或平板上的显示效果，但手边没有相应的移动设备，可以使用谷歌浏览器内置的开发者工具来模拟。该功能能帮助您快速预览和调试响应式页面。
本文运行环境：MacBook Pro，macOS Sonoma
一、启动开发者工具并进入设备模式
这是开启设备模拟的基础步骤，通过开发者工具的界面入口激活移动视图功能。
1、在Chrome浏览器中打开目标网页。
2、按下 Option + Command + I 快捷键，或右键点击页面任意位置选择“检查”来打开开发者工具。
3、在开发者工具左上角找到手机与平板组合的图标 Toggle Device Toolbar，点击该图标即可进入设备模拟模式。
二、选择预设的移动设备
Chrome提供了多种主流设备的屏幕参数，可一键切换以查看特定设备的渲染效果。
1、进入设备模式后，点击工具栏顶部的设备名称下拉菜单，默认可能显示为“Responsive”。
2、从下拉列表中选择一款预设设备，例如 iPhone 15 Pro 或 Pixel 8。
3、页面会立即适配所选设备的屏幕尺寸、分辨率和用户代理字符串（User Agent）。
三、自定义设备分辨率
当预设设备不满足需求时，可以通过手动输入参数来创建符合特定要求的设备视图。
1、在设备下拉菜单中选择 Edit… 选项。
2、点击 Add custom device 按钮。
3、填写设备名称、宽度（Width）、高度（Height）以及设备像素比（Device pixel ratio），例如设置为 414 x 896，DPR为2。
4、保存后，新创建的设备将出现在预设列表中，可随时调用。
四、调整设备方向与缩放比例
为了全面测试不同场景下的页面布局，可以实时更改设备的显示方向和视图缩放级别。
1、点击设备视图顶部的旋转图标，可在 竖屏（Portrait） 和 横屏（Landscape） 之间切换。
2、使用工具栏右侧的缩放下拉菜单，选择不同的缩放比例，如 75% 或 50%，以便在有限的屏幕上查看完整布局。
3、直接拖动模拟器视口的边框，可以手动调整视口大小，用于测试响应式断点的触发情况。
五、模拟网络速度
真实的移动网络环境通常比桌面宽带慢，模拟低速网络有助于评估页面加载性能。
1、在开发者工具中切换到 Network 面板。
2、在面板顶部的“Throttling”下拉菜单中，选择一种网络类型，例如 Slow 3G 或 Fast 3G。
3、刷新页面，观察资源加载时间、首屏渲染速度等性能表现。
