safari 响应式设计模式可模拟各类移动设备显示效果，需先启用“开发”菜单，再通过菜单或快捷键进入，支持设备预设、自定义分辨率与ua、联动web检查器调试。
如果您需要在 macOS Safari 浏览器中验证网页在各类移动设备上的显示效果，但缺乏真实 iPhone 或 iPad 设备，Safari 内置的响应式设计模式可直接模拟不同分辨率、像素比与用户代理的终端环境，支持实时调整视口并联动 Web 检查器定位布局问题。以下是完整调试操作路径：
一、启用 Safari 开发者菜单
响应式设计模式属于 Safari Web 检查器套件的一部分，必须先激活“开发”菜单才能访问全部调试入口。该设置只需完成一次，后续重启浏览器仍保持生效。
1、启动 Safari 浏览器，点击顶部菜单栏中的 Safari → 设置（部分系统版本显示为“偏好设置”）。
2、在设置窗口中切换至 高级 标签页。
3、滚动到底部，勾选 “在菜单栏中显示‘开发’菜单” 选项。
4、关闭设置窗口，确认顶部菜单栏中已出现 “开发” 菜单项，表示启用成功。
二、进入响应式设计模式
启用开发者菜单后，即可通过标准路径或快捷键快速进入响应式视口模拟环境，页面将被包裹于可自由缩放、旋转与重设参数的容器中，支持毫秒级布局反馈。
1、在 Safari 中打开待测试的目标网页，确保页面已完成加载。
2、点击顶部菜单栏的 开发 → 进入响应式设计模式。
3、页面立即切换为响应式视图，顶部出现控制条，包含设备预设下拉框、自定义宽高输入框、旋转按钮及缩放滑块。
4、按下快捷键 Command + Control + R 可跳过菜单导航，直接触发该模式。
三、选择设备预设进行快速模拟
Safari 内置 Apple 官方设备的精确分辨率、设备像素比（DPR）与默认用户代理字符串（UA），可一键加载真实终端参数，避免手动输入偏差，确保媒体查询与 viewport 解析逻辑准确触发。
1、在响应式设计模式控制条左侧，点击 设备下拉菜单。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
2、从列表中选择目标设备，例如 iPhone 15 Pro Max、iPad mini (6th generation) 或 iPhone SE (3rd generation)。
3、页面自动应用该设备的宽度、高度、DPR 及 UA，强制触发 CSS 媒体查询与 viewport 元标签解析。
4、点击控制条中的 旋转图标，可在竖屏与横屏之间即时切换，观察 flex 布局断点、grid 容器重排及图片 srcset 适配行为。
四、自定义分辨率与用户代理
当需覆盖非 Apple 设备、折叠屏、第三方安卓机型或特定浏览器内核场景时，可绕过预设，独立设定视口尺寸、设备像素比与 UA 字符串，实现精准模拟。
1、在响应式设计模式控制条中，点击 自定义 选项卡。
2、在宽度与高度输入框中分别填入数值，例如 360 × 640 模拟主流安卓小屏，或 720 × 1280 模拟中等密度设备。
3、在设备像素比（DPR）输入框中填入数值，例如 2.0 或 3.0，以匹配目标设备物理像素密度。
4、点击用户代理（UA）下拉框，选择预置浏览器类型（如 Chrome on Android、Firefox on iOS），或点击 编辑用户代理 手动输入完整 UA 字符串。
五、结合 Web 检查器调试响应式样式
在响应式设计模式下同步启用 Web 检查器，可实时查看元素盒模型、禁用/修改媒体查询规则、编辑 CSS 属性并观察渲染变化，形成闭环调试流程。
1、保持响应式设计模式开启状态，右键点击页面任意元素，选择 检查元素。
2、右侧检查器面板自动高亮对应 DOM 节点，并显示其计算样式、继承链与媒体查询生效状态。
3、在右侧样式面板中，找到被包裹在 @media 规则内的 CSS 属性，点击左侧复选框可临时禁用该规则。
4、直接双击某条 CSS 值（如 max-width: 768px）进行编辑，输入新数值后按 Enter 键，页面立即刷新渲染效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
