使用Chrome开发者工具可模拟移动设备测试响应式网页。首先打开开发者工具并启用设备模拟模式，选择预设设备或自定义视口大小以测试不同屏幕尺寸；接着切换横竖屏与启用触摸事件模拟，验证交互兼容性；最后结合网络条件模拟，评估弱网环境下的性能表现，确保页面在各类设备上正常显示与运行。
如果您在开发网页时需要测试不同设备上的显示效果，但实际设备有限，则可以使用谷歌浏览器内置的开发者工具来模拟移动设备的屏幕尺寸和用户代理。通过设备模式，您可以快速查看网页在手机、平板等设备上的响应式表现，并进行实时调试。
本文运行环境：MacBook Pro，macOS Sonoma
一、打开Chrome开发者工具并进入设备模拟模式
设备模拟模式是Chrome开发者工具中的核心功能之一，它允许您模拟各种移动设备的屏幕分辨率和触摸行为，便于进行响应式设计测试。
1、在Chrome浏览器中打开需要调试的网页。
2、按下 Command + Option + I（Windows为F12或Ctrl + Shift + I）打开开发者工具。
3、点击开发者工具左上角的 设备切换图标（一个手机和平板叠加的图标），即可进入设备模拟模式。
二、选择预设移动设备进行测试
Chrome提供了多种常见移动设备的预设参数，包括屏幕尺寸、像素密度和用户代理字符串，可一键切换以模拟真实设备环境。
1、进入设备模拟模式后，在顶部设备栏左侧点击设备下拉菜单。
2、从列表中选择目标设备，例如 iPhone 14、Pixel 5 或 iPad 等。
3、页面将自动调整为所选设备的屏幕尺寸，并发送对应的用户代理请求头。
三、手动调整视口大小进行响应式测试
除了使用预设设备，您还可以自由拖动视口边缘或手动输入尺寸，精确测试特定断点下的布局变化。
1、在设备模拟模式下，直接拖动屏幕边框即可动态调整视口宽度和高度。
2、在设备栏中输入自定义分辨率，如宽度设置为 375px，高度设置为 667px，模拟主流手机尺寸。
3、观察CSS媒体查询在不同断点下的触发情况，确保布局正确适配。
四、启用触摸事件模拟与设备方向切换
为了更真实地模拟移动设备交互，Chrome支持触摸事件模拟和横竖屏切换，帮助检测触控兼容性问题。
1、在设备工具栏中找到方向切换按钮，点击可将设备从竖屏切换为 横屏 模式。
2、右键点击页面任意位置，选择“Add sensor override”并启用 Touch 支持，使鼠标事件模拟为触摸事件。
3、测试滑动、双击等操作是否正常触发相应的JavaScript事件。
五、结合网络条件模拟进行性能调试
移动设备常处于弱网环境，通过限制网络速度可评估页面在低速连接下的加载表现。
1、在开发者工具中切换到 Network 标签页。
2、在顶部网络速率下拉菜单中选择预设条件，如 Fast 3G 或 Slow 3G。
3、刷新页面，观察资源加载顺序、首屏时间及图像占位表现，优化关键渲染路径。
