谷歌浏览器怎么模拟手机模式 Chrome开发者工具调试移动端视图

谷歌浏览器开发者工具可模拟手机模式调试网页：先打开开发者工具并启用设备模拟，再选择预设设备或自定义参数，接着启用触控与网络限制模拟，最后可保存常用配置为快捷入口。

如果您在开发网页时需要查看其在移动设备上的显示效果，但手边没有真实手机，谷歌浏览器的开发者工具可以模拟手机模式进行调试。以下是实现此功能的具体步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、打开开发者工具并启用设备模拟

Chrome开发者工具内置响应式设计模式，可模拟多种主流移动设备的屏幕尺寸、像素比及用户代理。启用后，页面将按所选设备参数渲染，并支持触控事件模拟。

1、在Chrome中打开目标网页。

2、按下 Command + Option + I（Mac）或 Ctrl + Shift + I（Windows/Linux）打开开发者工具。

3、点击开发者工具左上角的 “切换设备工具栏”图标（一个矩形加斜线的图标），或直接按 Command + Shift + M（Mac）/ Ctrl + Shift + M（Windows/Linux）。

二、选择预设设备型号

Chrome提供常见移动设备的分辨率、DPR（设备像素比）和UA字符串预设，选择后自动应用对应视口与用户代理。

1、在设备工具栏顶部下拉菜单中，点击 “Responsive”右侧的下拉箭头。

2、从列表中选择 iPhone 14 Pro、Pixel 5 或 iPad Pro等任一预设设备。

3、刷新页面，观察布局、字体大小及媒体查询是否按预期触发。

三、自定义设备参数

当预设设备不满足测试需求时，可手动设置宽度、高度、DPR及UA字符串，实现更精确的模拟场景。

1、在设备工具栏中，点击右上角 三个点图标 → “Edit…”。

标签： linux windows 浏览器 谷歌 iphone ipad macbook 工具 mac ai ipad pro