必须先启用Safari开发者菜单并勾选“在菜单栏中显示‘开发’菜单”，否则无法进入响应式设计模式；再通过预设设备（如iPhone 15 Pro）一键同步视口、DPR、UA和缩放，才能真实还原移动端环境。
你需要在Mac上用Safari调试网页在iPhone或iPad上的显示效果，但页面始终以桌面版加载，媒体查询不触发、按钮错位、触控区域太小——这说明只改UA远远不够，必须同步控制视口、DPR和缩放行为才能真实还原移动端环境。
启用Safari开发者菜单
没有这一步，后续所有响应式调试功能都不可见，菜单栏里压根不会出现“开发”二字。
打开Safari → 顶部菜单栏点击「Safari」→「设置」（macOS Sonoma及更新系统显示为“设置”，旧系统为“偏好设置”）→ 切换到「高级」标签页 → 勾选【在菜单栏中显示“开发”菜单】。
关闭设置窗口后，立刻检查菜单栏：确认「开发」已出现在「书签」与「窗口」之间；若未出现，重启Safari再试一次——【务必确认勾选状态已保存】，否则整个流程中断。
进入响应式设计模式
这是模拟移动设备屏幕尺寸的核心入口，它不只是拉伸窗口，而是真实注入设备级参数。
方法一（菜单法）：访问任意已加载完成的网页 → 点击顶部菜单栏「开发」→「进入响应式设计模式」。
方法二（快捷键法）：Command + Control + R（注意不是 Command + R），页面顶部会立即出现控制栏，含设备下拉框、宽高输入框、旋转按钮和缩放滑块。
⚠️ 必须等网页完全加载后再进入，否则CSS媒体查询和JavaScript的matchMedia判断可能沿用上一轮缓存值，导致布局检测失效。
用预设设备一键还原真实参数
手动输分辨率极易出错：把iPhone 15 Pro的393×852写成393×853，页面就会因视口宽度偏差1px而触发错误断点；更别提漏设DPR导致字体发虚、图标糊成一片。
第一步：点击控制栏左端的设备下拉箭头 → 从列表中直接选择「iPhone 15 Pro」或「iPad Air (6th generation)」。
第二步：系统自动应用三项关键参数：对应视口尺寸（如393×852）、设备像素比（iPhone为3x，iPad为2x）、完整User-Agent字符串。
第三步：点击右侧旋转按钮切换竖屏/横屏；对iPad可连续点击进入Split View多任务状态——此时页面DOM、CSS计算、JS运行环境全部按真实设备逻辑重载。
这一步操作起来很简单，直接选型号就行，但它是唯一能同步控制视口、DPR、UA、缩放四要素的方式，仅改UA或仅调窗口大小都不算真模拟。
手动输入自定义分辨率（慎用）
仅当需要测试非标设备（如折叠屏半开态、车载屏、定制工控平板）时才启用，日常调试强烈建议用预设设备。
在响应式设计模式控制栏中，清空设备下拉框选择，直接在宽度/高度输入框里填数值，例如：宽度填414，高度填896。
填完后按回车，页面视口立即重设——但注意，【DPR和UA不会自动匹配】，你得额外点开右上角齿轮图标 → 手动设置设备像素比（如设为3x）→ 再点用户代理下拉菜单 → 选对应设备UA，否则JS里的window.devicePixelRatio仍返回1，高清图照样糊。
拖动视口边缘半透明控制柄也能实时调整尺寸，但无法精确控制DPR和UA，适合粗略预览。
