可通过Chrome开发者工具模拟移动设备测试网页，先使用快捷键Command+Shift+M（Mac）或Ctrl+Shift+M（Windows/Linux）进入移动模式，或通过右键“检查”打开工具并点击手机图标启用；随后在设备下拉菜单选择iPhone 15 Pro、Pixel 8等预设机型，或自定义分辨率与DPR；还可通过Network面板设置Slow 3G等网络限速，全面模拟真实移动端浏览环境。
如果您需要测试网页在手机或平板上的显示效果，但又没有相应的实体设备，可以通过Chrome浏览器的开发者工具来模拟移动环境。该功能可以精确地复现不同设备的屏幕尺寸、用户代理和触摸交互，帮助您进行响应式设计调试。
本文运行环境：MacBook Pro，macOS Sonoma
一、通过快捷键启用设备工具栏
使用快捷键是最快捷的方式，可以直接进入移动设备模拟模式，无需经过多层菜单。
1、在Chrome中打开您想要测试的网页。
2、按下 Command + Shift + M（Mac）或 Ctrl + Shift + M（Windows/Linux）组合键。
3、页面视图会立即切换为移动设备模式，顶部出现设备控制栏。
4、此时鼠标指针会变为触控点样式，以模拟手指点击操作。
二、通过开发者工具菜单开启
对于不熟悉快捷键的用户，可以通过开发者工具的标准入口来启动设备模拟功能。
1、右键单击网页任意空白区域，选择“检查”选项。
2、或者点击浏览器右上角菜单，依次选择“更多工具” > “开发者工具”。
3、在开发者工具面板的左上角，找到一个手机与平板叠加的图标并点击。
4、成功激活后，页面将进入可调节的移动视图模式。
三、选择预设的设备型号
Chrome内置了大量主流设备的参数配置，选择预设机型可以快速还原真实浏览场景。
1、在设备工具栏的下拉菜单中，点击“Responsive”旁边的设备选择框。
2、从列表中选择目标设备，例如 iPhone 15 Pro、Pixel 8 或 iPad Air。
3、页面会自动应用该设备的屏幕宽度、高度、像素密度和用户代理字符串。
4、选择后可通过旋转按钮切换横屏与竖屏方向，观察布局变化。
四、自定义设备分辨率
当需要测试的设备不在预设列表中时，可以手动创建符合特定参数的自定义设备。
1、在设备下拉菜单中选择“Edit…”选项。
2、点击“Add custom device”，填写设备名称、宽度、高度和设备像素比（DPR）。
3、例如设置宽度为375px，高度为667px，DPR为2，以模拟常见iPhone尺寸。
4、保存后该配置将存入预设列表，方便后续重复使用。
五、调整网络速度以模拟真实环境
为了更贴近移动用户的实际体验，可以限制网络带宽来测试页面加载性能。
1、在开发者工具中切换到“Network”标签页。
2、在顶部的“Throttling”下拉菜单中选择网络类型。
3、可选 Slow 3G、Fast 3G 或 Offline 来模拟不同网络状况。
4、刷新页面即可观察在弱网条件下资源加载和渲染的表现。
