必须先启用 safari 开发者菜单才能使用响应式设计模式，否则所有调试功能不可用；启用后通过菜单或快捷键进入该模式，再选择预设设备（如 iphone 15 pro）即可真实模拟屏幕尺寸、像素密度及用户代理。
要在 Safari 浏览器中真实还原 iPhone 15 Pro、iPad Air 等设备的屏幕尺寸与像素密度，必须先启用开发者菜单，否则“响应式设计模式”入口不可见，所有后续操作都无法进行。
开启 Safari 开发者菜单
这一步是整个流程的前提，跳过将导致后续所有调试功能灰显不可用。
1、点击屏幕左上角的「Safari」→「设置」（部分系统版本显示为“偏好设置”）。
2、切换到顶部标签栏中的「高级」页签（齿轮图标，通常在最右侧）。
3、向下滚动到底部，勾选【在菜单栏中显示“开发”菜单】。
4、关闭设置窗口，确认菜单栏中「开发」已出现在「书签」与「窗口」之间——若未出现，请重启 Safari 再试。
进入响应式设计模式
只有在目标网页完全加载后进入该模式，才能准确捕获 CSS 媒体查询和 JavaScript 的 viewport 判断逻辑。
方法一：菜单启动
访问任意待测网页 → 点击顶部菜单栏「开发」→ 选择「进入响应式设计模式」。
方法二：快捷键启动
确保网页已加载完成 → 按下 Command + Control + R，页面立即切换为可调节视口区域。
进入后页面顶部会出现控制栏，包含设备预设下拉框、宽高输入框、旋转按钮和缩放滑块——此时才真正开始模拟。
使用设备预设快速匹配主流机型
手动输入分辨率极易出错：比如把 iPhone 15 Pro 的 393×852 写成 393×853，会导致媒体查询失效，页面布局错乱。
① 在响应式设计模式激活状态下，点击控制栏左侧的设备下拉菜单。
② 从列表中选择目标设备，例如「iPhone 15 Pro」或「iPad Air (6th generation)」。
③ 页面将自动应用对应设备的视口尺寸、设备像素比（如 3x）及默认用户代理字符串——这些参数由 Safari 内置维护，与真实设备一致。
④ 连续点击控制栏中的旋转图标，可在竖屏与横屏间切换；对 iPad 连续点击还可依次进入 Split View 等多任务布局状态。
