应避免用纯宽度媒体查询识别iPad，而需结合高像素比、视口行为及横竖屏状态，通过link引入专用pad.css（置于所有样式前且viewport已声明），仅写增量样式，并分landscape/portrait加载，真机测试验证桌面模式影响。
直接用 @media (min-width: 768px) and (max-width: 1024px) 并不可靠——它会把所有落在这个宽度区间的设备（比如缩放后的桌面浏览器、某些安卓平板）都当成 iPad，导致样式错配。真正有效的做法是：**不追求“识别 iPad”，而是精准匹配平板典型视口行为 + 高像素比 + 横竖屏状态，并用独立 CSS 文件加载**。
用 link 标签引入专用 pad.css（最稳）
在 中写：
- 必须放在所有其他样式表之前，且确保
已声明并置于最顶部 - 禁用
@import：它会阻塞渲染、无法预加载，iOS Safari 还可能直接忽略
pad.css 里只写增量样式（别重置全局）
它不是完整样式表，而是“补丁”。例如：
- 默认
.card是流式全宽、position: static；pad.css 里只加：width: 320px; margin-left: 40px; position: absolute; - 避免重复写
font-size、color、reset等基础项，防止和 main.css 冲突 - 触摸目标间距可微调：
button { padding: 14px 24px; min-height: 44px; }
横竖屏区分建议拆成两个 link（更可控）
比在 CSS 里写 @media (orientation: landscape) 更可靠：
- 这样能分别处理横屏侧边栏展开、竖屏单列紧凑等场景，逻辑更清晰
真机测试不能省（尤其 iPad Safari 桌面模式）
iPadOS 15+ 的 Safari 支持“桌面站点”开关，开启后 viewport 行为会变：
- 即使物理竖屏，也可能报告
width=1024px，导致误触发横屏样式 - 务必在真实设备上验证：打开设置 → Safari → 请求桌面网站 → 切换开关，观察是否仍符合预期
- 不要依赖
device-width：它已被弃用，模拟器和新版系统都不认
