当需要在桌面版Chrome中测试网页在iPhone或安卓手机上的显示效果，却发现页面固执地加载PC版布局时，问题往往出在服务器依据浏览器User-Agent和视口参数判断设备类型。开发者工具的设备模拟功能正是为此设计，它能同步改写这两项关键指标。

启用设备模拟模式

这一步是基础中的基础。不激活设备工具栏，后面的一切都无从谈起——既无法选择机型，也无法调整尺寸。

在Chrome中打开任意网页，按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）打开开发者工具。

点击开发者工具左上角的手机/平板图标（Toggle device toolbar），或者直接按 Ctrl+Shift+M（Windows/Linux）或 Cmd+Shift+M（macOS）。快捷键比点图标快得多，尤其当你频繁切换时。

页面会立刻缩放为窄视口，顶部出现含设备下拉菜单、旋转按钮和网络节流选项的横条。此时鼠标指针变成圆点状触控光标，表示已进入移动端模拟环境。

选择预设机型快速还原真实设备

选对预设机型，等于是把真实设备的分辨率、DPR和UA字符串一键复刻过来。比手动填写参数省心得多，也避免了因为参数填错导致服务器返回错误版本。

方法一：直接选择主流机型

在顶部设备下拉菜单中，直接选择 iPhone 15 Pro 或 Pixel 8 等主流型号，页面会自动刷新并应用对应参数。

方法二：对比iOS与Android差异

如果需要验证iOS与Android的差异，可以先选iPhone 15 Pro观察布局，再从同一菜单切换为 Galaxy S24，然后刷新对比。注意：部分网站会因为UA中“iPhone”或“Android”字样返回完全不同的HTML结构。

需要留意的是：下拉菜单默认显示“Responsive”，必须手动展开并点击具体设备名才会生效。只停留在“Responsive”状态不会触发UA变更，这是很多新手容易忽略的细节。

自定义设备参数应对特殊场景

当项目需要适配一些小众屏幕——比如折叠屏半开态、车载HMI——或者验证特定DPR下的像素渲染效果时，预设机型就不够用了。这时候就需要手动配置，完全自主控制各项参数。

1. 第一步：进入设备管理界面。在设备下拉菜单底部点击 Edit…，进入设备管理界面。
2. 第二步：添加自定义设备。点击 Add custom device，填写名称（比如“Foldable Half”），宽度设为 672px，高度设为 864px，设备像素比（DPR）设为 2.8。
3. 第三步：填写User Agent。在User agent字段粘贴目标字符串，例如：
   Mozilla/5.0 (Linux; Android 14; SM-F956B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.6478.127 Mobile Safari/537.36。务必确认括号内设备型号与实际一致，否则某些CDN可能会拦截请求。
4. 第四步：保存并调用。点击 Add 保存，新设备即刻出现在下拉列表顶部，下次测试可以直接调用，省去重复配置的麻烦。

强制刷新页面使UA变更生效

很多人在这一步栽了跟头：以为选好机型页面就会自动适应，结果发现只是界面缩放了一下，服务器端根本没收到新的User-Agent信息。实际上，仅开启设备模拟或更换机型，页面不会自动重发HTTP请求，服务器仍按旧UA返回内容，你看到的只是前端CSS媒体查询的局部缩放效果。

按 F5 或点击地址栏右侧的刷新按钮，确保浏览器向服务器发起带新User-Agent头的新请求。

验证是否成功也很简单：在开发者工具中切换到 Network 标签页，刷新页面，点击第一个HTML请求，查看 Request Headers，找到 User-Agent 行，确认它的值与你设定的完全一致。这样才算真正生效。

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

下载APP查看