chrome设备模拟需先启用设备工具栏，再选择预设机型或自定义参数，并强制刷新页面使user-agent生效，否则仅缩放而未触发服务器端响应。
当你需要在桌面版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差异，可先选iPhone 15 Pro → 观察布局 → 再从同一菜单切换为 Galaxy S24 → 刷新对比，注意部分网站会因UA中“iPhone”或“Android”字样返回完全不同的HTML结构。
注意：下拉菜单默认显示“Responsive”，必须手动展开并点击具体设备名才会生效，只停留在“Responsive”状态不会触发UA变更。
自定义设备参数应对特殊场景
当项目需适配小众屏幕（如折叠屏半开态、车载HMI）或验证特定DPR下的像素渲染时，预设机型不够用，必须手动配置。
第一步：在设备下拉菜单底部点击 Edit… → 进入设备管理界面。
第二步：点击 Add custom device，填写名称（如“Foldable Half”）、宽度（例如 672px）、高度（例如 864px）、设备像素比（DPR，例如 2.8）。
第三步：在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会拦截请求】
第四步：点击 Add 保存，新设备即刻出现在下拉列表顶部，下次测试可直接调用。
强制刷新页面使UA变更生效
仅开启设备模拟或更换机型，页面不会自动重发HTTP请求；服务器仍按旧UA返回内容，你看到的只是前端CSS媒体查询的局部缩放效果。
按 F5 或点击地址栏右侧的刷新按钮，确保浏览器向服务器发起带新User-Agent头的新请求。
验证是否成功：在开发者工具中切换到 Network 标签页 → 刷新页面 → 点击第一个HTML请求 → 查看 Request Headers → 找到 User-Agent 行，确认其值与你设定的完全一致。
