可在 macOS Safari 中通过启用开发者菜单并进入响应式设计模式，选择预设设备或自定义分辨率与 UA，结合 Web 检查器实时调试网页移动端适配效果。
如果您需要在 macOS Safari 中验证网页在不同移动端设备上的分辨率适配效果，但缺乏真实 iOS 设备，可直接利用其内置的响应式设计模式进行精确视口模拟与实时调试。以下是完成该测试的具体操作路径：
一、启用 Safari 开发者菜单
响应式设计模式属于 Safari 开发者工具套件的一部分，必须先开启“开发”菜单才能访问所有调试功能。该步骤仅需一次性配置，后续即可随时调用。
1、打开 Safari 浏览器，点击顶部菜单栏中的 Safari → 设置（旧版系统显示为“偏好设置”）。
2、在设置窗口中切换至高级标签页。
3、向下滚动到底部，勾选在菜单栏中显示“开发”菜单选项。
4、关闭设置窗口，确认菜单栏中已出现“开发”菜单项，表示启用成功。
二、进入响应式设计模式
启用开发者菜单后，即可启动响应式视口模拟环境，页面将被包裹在一个可自由缩放与重设分辨率的容器中，支持实时预览布局响应行为。
1、在 Safari 中打开待测试的目标网页。
2、点击顶部菜单栏的开发 → 进入响应式设计模式（也可使用快捷键 Command + Control + R）。
3、页面立即切换为响应式视图，顶部出现控制条，包含设备预设下拉框、自定义宽高输入框、旋转按钮及缩放滑块。
4、此时鼠标悬停于页面任意位置，将实时高亮对应元素的盒模型边界与 CSS 尺寸信息。
三、选择设备预设进行快速模拟
Safari 内置主流 Apple 设备的官方分辨率与像素比参数，可一键加载真实设备的视口配置，避免手动输入误差，提高测试准确性。
1、在响应式设计模式控制条左侧，点击设备下拉菜单。
2、从列表中选择目标设备，例如iPhone 15 Pro Max、iPad mini (6th generation) 或 iPhone SE (3rd generation)。
3、页面自动应用该设备的宽度、高度、设备像素比（DPR）及用户代理字符串（UA），触发媒体查询与 viewport 解析逻辑。
4、点击控制条中的旋转图标，可在竖屏与横屏之间即时切换，观察 flex 布局、grid 容器及图片适配表现。
四、自定义分辨率与用户代理
当需测试非标准尺寸、折叠屏、第三方安卓设备或特定浏览器 UA 时，可绕过预设，直接设定视口参数并覆盖用户代理，实现更灵活的模拟场景。
1、在响应式设计模式控制条中，点击自定义选项卡。
2、在宽度与高度输入框中分别填入数值，例如360 × 640模拟主流安卓手机小屏。
3、点击用户代理（User Agent）下拉菜单，选择预设 UA（如 Chrome on Android），或点击“其他”手动输入完整 UA 字符串。
4、勾选启用设备像素比（DPR）并输入数值（如 2.0 或 3.0），以匹配目标设备的渲染精度。
五、结合 Web 检查器验证媒体查询与布局
响应式设计模式与 Web 检查器深度集成，可在模拟视口下实时查看 CSS 媒体查询生效状态、元素计算样式及盒模型变化。
1、保持响应式设计模式开启状态，右键页面任意空白处，选择检查元素（或按 Command + Option + C）。
2、在 Web 检查器的元素面板中，展开 HTML 结构，观察当前选中元素的 computed 样式是否随视口变化而更新。
3、切换至资源面板，查看当前激活的媒体查询断点（@media）及其匹配状态（active/inactive）。
4、在样式侧边栏中，临时修改 width、max-width 或 flex-basis 等属性，观察页面布局是否即时响应。
