在桌面端 Safari 中启用响应式设计模式需先开启开发者菜单：设置→高级→勾选“显示‘开发’菜单”，再通过“开发→进入响应式设计模式”或快捷键 Command+Control+R 启动，支持设备预设、手动调节视口、像素比、用户代理及联动 Web 检查器调试。
如果您希望在桌面端 Safari 浏览器中模拟手机或平板等移动设备的显示效果，以验证网页在不同屏幕尺寸下的布局与交互表现，则需启用其内置的响应式设计模式。该功能依赖于开发者工具的基础开启，以下是具体操作步骤：
一、启用 Safari 开发者菜单
响应式设计模式入口位于“开发”菜单下，而该菜单默认隐藏，必须先在 Safari 设置中显式启用，否则后续所有调试功能均不可用。
1、点击 Dock 栏中的 Safari 图标启动浏览器，或通过「应用程序」文件夹打开。
2、点击屏幕左上角的「Safari」菜单，在下拉项中选择「设置」（部分系统版本显示为“偏好设置”）。
3、在设置窗口顶部标签栏中，点击「高级」标签页（图标为齿轮状，通常位于最右侧）。
4、向下滚动至页面底部，勾选「在菜单栏中显示“开发”菜单」选项。
5、关闭设置窗口，确认顶部菜单栏中「开发」菜单已出现在「书签」与「窗口」之间。
二、进入响应式设计模式
启用开发者菜单后，即可通过多种方式快速激活响应式视口环境，该模式允许实时调整视口尺寸、像素比及用户代理，模拟真实设备渲染行为。
1、访问任意目标网页，确保页面已完成加载。
2、点击顶部菜单栏的「开发」，在下拉列表中选择「进入响应式设计模式」。
3、页面将立即切换为可调节视口区域，顶部出现控制栏，包含设备预设、自定义宽高输入框、旋转按钮及缩放控件。
4、按下快捷键 Command + Control + R 可直接触发该模式，无需经过菜单导航。
三、使用设备预设快速模拟主流移动终端
Safari 内置常见 iOS 设备的分辨率与像素比配置，可一键还原 iPhone 或 iPad 的典型显示参数，避免手动输入误差。
1、在响应式设计模式激活状态下，点击控制栏左侧的设备下拉菜单。
2、从列表中选择目标设备，例如「iPhone 15 Pro」或「iPad Air (6th generation)」。
3、页面将自动应用对应设备的视口尺寸（如 393×852）、设备像素比（如 3x）及默认用户代理字符串。
4、连续点击控制栏中的旋转图标，可在竖屏与横屏间切换；对 iPad 连续点击还可依次进入 Split View 等多任务布局状态。
四、手动调节视口与显示参数
当预设设备无法覆盖测试场景时，可通过拖拽边界或输入数值精确控制视口，同时可独立调整设备像素比与用户代理，实现深度模拟。
1、将鼠标悬停于视口边缘，出现半透明手柄后，拖动以实时缩放视口区域。
2、在控制栏中部的宽高输入框中，分别键入所需数值（如宽度「375」、高度「667」），按回车确认。
3、点击控制栏中「设备像素比」右侧弹出菜单，选择「1x」「2x」或「3x」以匹配目标设备物理密度。
4、点击「用户代理」右侧菜单，选择「iPhone」、「iPad」或「Custom」，若选自定义，可粘贴完整 UA 字符串用于特定服务端识别逻辑测试。
五、结合 Web 检查器同步调试响应式样式
在响应式设计模式运行期间，Web 检查器可同步工作，支持对当前视口下的 HTML 结构、CSS 媒体查询触发状态及计算样式进行即时分析与修改。
1、保持响应式设计模式开启，按下快捷键 Option + Command + I，或点击「开发」→「显示 Web 检查器」。
2、检查器面板将显示当前视口内渲染的 DOM 树，左侧为元素结构，右侧为计算样式与媒体查询列表。
3、点击右上角「媒体查询」标签，查看当前激活的断点（如 @media (max-width: 768px)），并观察各规则是否生效。
4、在元素面板中右键某节点，选择「强制状态」→「:hover」或「:focus」，验证移动端触摸反馈逻辑是否适配。
