首先打开Chrome开发者工具，通过点击手机图标启用设备模拟模式，可选择预设移动设备或自定义分辨率，调整方向与缩放以测试响应式效果。
如果您在使用Chrome浏览器进行网页开发或测试时，需要查看页面在移动设备上的显示效果，可以通过开发者工具中的设备模拟功能来实现。该功能允许您模拟不同型号的移动设备，调整屏幕尺寸和分辨率，以确保网页在各种设备上正常显示。
本文运行环境：MacBook Pro，macOS Sonoma
一、打开Chrome开发者工具
要使用移动设备模拟功能，首先需要进入Chrome开发者工具界面。这是所有后续操作的基础。
1、在Chrome浏览器中打开任意网页。
2、右键点击页面任意位置，选择检查选项。
3、或者使用快捷键Option + Command + I（Windows为F12或Ctrl + Shift + I）直接打开开发者工具。
二、启用设备模拟模式
开发者工具默认处于桌面视图，需手动切换至移动设备模拟模式，以便进行响应式设计调试。
1、在开发者工具左上角找到一个手机和平板图标，点击该按钮即可进入设备模拟模式。
2、页面会立即变为可调节的移动设备视图，顶部显示当前模拟设备的型号和分辨率。
三、选择预设移动设备
Chrome内置了多种主流移动设备的预设参数，可快速切换至特定设备查看渲染效果。
1、在设备模拟模式下，点击顶部设备选择下拉菜单。
2、从列表中选择目标设备，例如iPhone 14 Pro、Pixel 7 或 iPad Mini。
3、页面将自动适配所选设备的屏幕尺寸、像素密度和用户代理字符串。
四、自定义设备分辨率
当预设设备不符合需求时，可以手动设置屏幕宽度、高度和像素比例，实现更灵活的测试。
1、在设备下拉菜单中选择Edit…选项，进入自定义设备配置界面。
2、输入所需的宽度（Width）和高度（Height）数值，单位为像素。
3、设置设备像素比（Device pixel ratio），常见值为1、1.5、2或3。
4、点击“Add”保存自定义设备，之后可在设备列表中快速调用。
五、调整方向与缩放
为了全面测试移动端体验，可以实时更改设备的方向和缩放级别。
1、点击设备顶部的旋转图标，可在竖屏（Portrait）和横屏（Landscape）之间切换。
2、使用顶部的缩放下拉菜单，选择不同的缩放比例，如75%、50%等，观察布局变化。
3、拖动设备边框也可手动调整视口大小，用于测试响应式断点。
