谷歌浏览器界面简洁直观，地址栏集搜索与导航于一体，标签页管理灵活高效。加上丰富的主题和扩展支持，其用户体验一直备受好评。

不过，今天我们聚焦一个对开发者、设计师乃至普通用户都相当实用的技巧——如何在电脑端的Chrome浏览器里，模拟手机浏览环境。

第一步：启动开发者工具

首先，打开谷歌浏览器并访问任意网页。

接下来，只需按下键盘上的F12键。

或者，在页面任意位置右键点击，选择“检查”。

随后，开发者工具面板就会立刻出现在屏幕旁侧。

第二步：切换至设备模式

在打开的开发者工具界面左上角，找到一个手机/平板形状的图标（通常是两个叠放的屏幕）。

点击这个图标，当前网页视图就会瞬间切换到移动设备预览模式。

第三步：选择预设设备型号

激活设备模式后，注意看开发者工具左上角的下拉菜单，默认可能显示为“Responsive”。

点击这个菜单，你会看到一个长长的设备列表。

从iPhone 14到Samsung Galaxy S23等主流型号应有尽有。

直接选择你想模拟的设备，页面分辨率和尺寸就会自动匹配。

第四步：自定义分辨率

如果预设型号不能满足需求，或者你想测试特定的屏幕尺寸，可以手动调整。

在设备选择器的下方，找到宽度（Width）和高度（Height）的输入框。

直接输入像375×812这样的具体数值即可。

第五步：模拟触摸交互与屏幕特性

进入设备模式后，你的鼠标指针会变成“手指”。

你可以直接点击、拖拽、滑动来模拟触摸操作，测试页面的交互响应。

此外，在开发者工具右侧的面板中，你还能调整设备像素比（DPR）等参数。

这对于测试高分辨率屏幕下的显示效果至关重要。

至此，一个完整的移动端模拟环境就搭建好了。

无论是为了调试网页的响应式布局，还是单纯想看看网站在手机上的样子，这套操作流程都能帮你快速搞定。

《夸克》非常好用的免费AI浏览器

下载APP查看