必须先启用safari的“开发”菜单才能使用响应式设计模式，该模式同步控制视口、dpr、缩放和ua，真实模拟iphone/ipad环境；仅改ua无法触发媒体查询与js判断逻辑。
要在 Safari 中真实模拟 iPhone 或 iPad 的移动端显示环境，关键不是只改用户代理，而是启用响应式设计模式——它同步控制视口尺寸、设备像素比（DPR）、缩放行为和 UA 字符串，才能准确触发网页的媒体查询与 JavaScript 判断逻辑。
必须先开启“开发”菜单
这是整个流程不可跳过的前提。没有这一步，“响应式设计模式”选项始终灰显，所有模拟功能都无法启动：
- 点击左上角「Safari」→「设置」（或“偏好设置”）
- 切换到顶部「高级」标签页（齿轮图标）
- 滚动到底部，勾选【在菜单栏中显示“开发”菜单】
- 关闭窗口后，确认菜单栏中「开发」已出现在「书签」和「窗口」之间；如未出现，重启 Safari 再试
进入响应式设计模式的两种方式
确保目标网页已完全加载完毕后再操作，否则 CSS 媒体查询和 matchMedia 等判断可能失效：
- 菜单法：点击「开发」→「进入响应式设计模式」
- 快捷键法：按下 Command + Control + R（注意不是 Command + R）
进入后页面顶部会出现控制栏，含设备下拉框、宽高输入框、旋转按钮和缩放滑块——此时才真正开始模拟。
用预设设备一键还原真实参数
手动输入分辨率极易出错（比如把 iPhone 15 Pro 的 393×852 写成 393×853），导致布局错乱。推荐直接选择内置机型：
- 点击控制栏左侧的设备下拉菜单
- 选择「iPhone 15 Pro」、「iPad Air (6th generation)」等具体型号
- 系统将自动应用对应视口尺寸、设备像素比（如 iPhone 是 3x）、默认用户代理字符串
- 连续点击旋转图标可在竖屏/横屏间切换；对 iPad 还可依次进入 Split View 等多任务状态
补充说明：仅改 UA 不等于真实模拟
有人尝试通过「开发 → 用户代理」单独切换为 iPhone UA，但这种方式不改变视口宽度、不启用高 DPR 渲染、也不影响 viewport 缩放逻辑，很多响应式样式和 JS 行为仍按桌面环境执行。只有响应式设计模式能完整复现移动端渲染链路。
