必须启用Safari“开发”菜单并进入响应式设计模式，才能真实模拟分辨率、DPR与UA联动效果；手动输入宽高需无单位、无逗号，预设设备可自动同步参数。
要在Safari中真实模拟不同屏幕分辨率以验证网页响应式布局效果，必须启用响应式设计模式——它同步控制视口宽度、设备像素比（DPR）、缩放行为与用户代理，仅改UA或仅调窗口大小均无法触发CSS媒体查询和matchMedia逻辑。
先开启“开发”菜单
响应式设计模式入口被隐藏在「开发」菜单下，不启用该菜单，后续所有操作都不可见、不可点。这一步跳过就等于整条路径中断。
点击左上角「Safari」→「设置」→ 切换到「高级」标签页 → 滚动到底部，勾选【在菜单栏中显示“开发”菜单】 → 关闭设置窗口，确认菜单栏中「开发」已出现在「书签」与「窗口」之间；若未出现，请重启 Safari 再试。
进入响应式设计模式
目标网页必须完全加载完毕后再启动该模式，否则 JavaScript 中的 matchMedia 或 window.innerWidth 判断可能读取到错误初始值，导致调试失真。
方法一：点击顶部菜单栏「开发」→「进入响应式设计模式」
方法二：直接按快捷键 Command + Control + R（注意不是 Command + R）
页面立即切换为可调节视口区域，顶部出现控制栏，含设备下拉框、宽高输入框、旋转按钮与缩放滑块——此时才真正开始模拟。
手动设置任意分辨率
当预设设备不满足测试需求（例如要验证 414×896 的 iPhone 14 Pro 竖屏+安全区偏移，或自定义 1280×720 的横屏平板），必须手动输入。
第一步：确保已处于响应式设计模式，且控制栏可见
第二步：点击控制栏中部的「宽度」输入框，输入目标像素值（如 375）→ Tab 键跳转至「高度」输入框 → 输入对应值（如 812）
第三步：按下回车确认，页面立即按新尺寸重绘；若数值超出当前窗口范围，会自动添加滚动条，但不影响渲染精度
第四步：如需复位，点击控制栏右侧的「重置视口」图标（两个弯曲箭头组成的圆圈）
注意：手动输入时不能带单位（px）或逗号，输入“375,812”或“375px”会导致输入框变红并拒绝提交。
联动调整设备像素比与用户代理
仅调分辨率不够——网页通过 window.devicePixelRatio 和 navigator.userAgent 判断设备能力，这两项必须同步匹配，否则图片srcset不切换、@media (min-resolution) 不生效。
方法一：用设备预设自动同步
点击控制栏左侧设备下拉菜单 → 选择「iPhone 15 Pro」→ 视口自动设为 393×852、DPR 自动设为 3x、UA 自动切换为 Mobile Safari 17.6 字符串
方法二：手动覆盖 UA（慎用）
点击「开发」→「用户代理」→ 勾选「自定义」→ 输入完整 UA 字符串（如 Mozilla/5.0 (iPhone; CPU iPhone OS 17_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Mobile/15E148 Safari/604.1）→ 此时 DPR 和视口仍需单独设置，否则 JS 判断仍按桌面逻辑执行
