17370845950

首先点击Chrome开发者工具中的设备切换图标或使用快捷键Cmd+Shift+M进入响应式视图，然后通过设备下拉菜单选择预设机型或自定义尺寸以模拟手机显示效果。

如果您在开发或测试网页时需要查看其在移动设备上的显示效果，可以通过 Google 浏览器开发者工具模拟手机视图来实现。该功能允许您预览网页在不同尺寸屏幕和设备上的响应式布局。

本文运行环境：MacBook Pro，macOS Sonoma

一、通过设备切换按钮进入手机模拟视图

Chrome 开发者工具内置了设备工具栏，可一键切换至常见的移动设备预设模式，便于快速测试响应式设计。

1、打开 Google Chrome 浏览器，访问目标网页。

2、按下 F12 或右键页面选择“检查”以打开开发者工具。

3、点击开发者工具左上角的设备切换图标（一个手机和平板叠加的图标）。

4、页面将立即切换为响应式视图，顶部显示设备选择栏，可从下拉菜单中选择具体设备型号，如 iPhone 15、Pixel 6 等。

二、手动设置自定义设备尺寸

当预设设备不满足需求时，您可以自定义屏幕宽度和高度，模拟特定分辨率的移动设备。

1、进入开发者工具后，点击设备下拉菜单，选择Edit… 或直接在响应式视图顶部输入尺寸。

2、在弹出的“Add device”窗口中，填写设备名称、宽度、高度、像素密度（device pixel ratio）等参数。

3、例如设置宽度为 375px，高度为 812px，模拟主流智能手机屏幕。

4、保存后该设备将出现在设备列表中，可随时调用。

三、使用快捷键快速切换至响应式模式

熟悉快捷键可以提升调试效率，无需依赖鼠标操作即可快速进入手机视图。

1、在页面上按下 Ctrl + Shift + M（Windows/Linux）或 Cmd + Shift + M（Mac）。

2、页面将自动进入响应式设计模式，顶部出现设备控制栏。

3、此时可通过拖动边框调整视口大小，或从设备下拉菜单中选择预设设备。