必须先启用Safari开发者菜单才能使用响应式设计模式：打开Safari设置→高级→勾选“在菜单栏中显示‘开发’菜单”，重启后确认菜单栏出现“开发”项；再通过菜单或Command+Control+R进入响应式设计模式，选择预设设备（如iPhone 15 Pro）以同步视口、DPR和UA，确保媒体查询正确触发。
你需要在Mac上用Safari调试网页在iPhone或iPad上的显示效果，但页面始终以桌面版加载，媒体查询不触发、按钮错位、触控区域太小——这说明只改UA远远不够，必须同步控制视口、DPR和缩放行为才能真实还原移动端环境。
启用Safari开发者菜单
没有这一步，后续所有响应式调试功能都不可见，菜单栏里压根不会出现“开发”二字。
打开Safari → 顶部菜单栏点击「Safari」→「设置」→ 切换到「高级」标签页 → 勾选【在菜单栏中显示“开发”菜单】。
关闭设置窗口后，立刻检查菜单栏：确认「开发」已出现在「书签」与「窗口」之间；若未出现，重启Safari再试一次——【务必确认勾选状态已保存】，否则整个流程中断。
进入响应式设计模式
这是模拟移动设备屏幕尺寸的核心入口，它不只是拉伸窗口，而是真实注入设备级参数。
方法一（菜单法）：访问任意已加载完成的网页 → 点击顶部菜单栏「开发」→「进入响应式设计模式」。
方法二（快捷键法）：Command + Control + R（注意不是 Command + R），页面顶部会立即出现控制栏，含设备下拉框、宽高输入框、旋转按钮和缩放滑块。
⚠️ 必须等网页完全加载后再进入，否则CSS媒体查询和JavaScript的matchMedia判断可能沿用上一轮缓存值，导致布局检测失效。
用预设设备一键还原iPhone/iPad环境
预设设备不仅切换UA，还同步设置视口尺寸、设备像素比（DPR）和缩放行为，这才是媒体查询能正确触发的关键。
第一步：在响应式设计模式控制栏左上角，点击设备下拉箭头。
第二步：从列表中选择「iPhone 15 Pro」或「iPad Air (6th generation)」等真实型号。
第三步：页面自动重载，应用对应视口（如393×852）、DPR（如3x）和UA字符串；此时触控区域、字体大小、媒体查询断点全部按真实iOS设备逻辑渲染。
第四步：连续点击控制栏中的旋转图标，可在竖屏与横屏间切换；对iPad连续点击还可依次进入Split View等多任务布局状态。
手动调节视口与参数（进阶）
当预设设备无法覆盖测试场景时，比如要验证折叠屏或自定义DPR下的渲染表现，就需要手动干预。
拖动视口边框外的半透明控制柄，可实时缩放视口区域；输入精确数值可设定任意宽高组合。
点击控制栏中的“设备像素比”弹出菜单，可单独调整为1x/2x/3x/4x——注意：仅修改DPR而不匹配对应视口尺寸，可能导致字体模糊或布局错乱。
点击“用户代理”弹出菜单，可粘贴自定义UA字符串；该操作仅对当前标签页生效，关闭即失效。
