ipad断点应优先依据实际逻辑分辨率（竖屏768px、横屏1024px）而非文档或device-width；需注意safari地址栏对视口影响，推荐组合使用@media (min-width: 768px) and (max-width: 1024px)与@media (min-width: 768px) and (orientation: landscape)；vh在地址栏变化时会跳变，应改用dvh或js动态设置--vh；prefers-reduced-motion需全面包裹动画相关样式，并注意放大显示对字号的影响。
iPad竖屏和横屏的断点怎么选
直接看设备实际尺寸比查文档更可靠。iPad 竖屏逻辑分辨率是 768px 宽（老款到新款基本一致），横屏是 1024px 宽——但注意，Safari 在 iPadOS 16+ 会把地址栏高度算进视口，导致 window.innerWidth 在某些场景下略小于预期，所以别死守 768/1024。
推荐用这两个断点组合覆盖主流 iPad：
-
@media (min-width: 768px) and (max-width: 1024px)：抓竖屏 + 横屏，但排除小屏手机和桌面大屏 - 再加一层
@media (min-width: 768px) and (orientation: landscape)单独处理横屏特例（比如隐藏侧边栏、调整网格列数）
别用 device-width，它在响应式页面里不可靠；也别迷信 “iPad Pro 12.9 的 1366px”，那只是渲染分辨率，CSS 视口仍是缩放后的逻辑像素。
为什么写了 @media (min-width: 768px) 却没生效
常见原因是 CSS 优先级或媒体查询被覆盖。iPad 上 Safari 默认启用「智能跟踪预防」，可能干扰某些动态注入的样式表加载顺序；更常踩的坑是：你写的规则被更宽泛的 @media (min-width: 640px) 或全局规则盖掉了。
立即学习“前端免费学习笔记（深入）”；
排查步骤：
- 打开 Safari 开发者工具（需 macOS 配合真机调试），检查元素的「Computed」面板，看对应样式是否被划掉
- 确认你的媒体查询规则没有写在
@import后面且未加all媒体类型声明 - 避免在
<style></style>标签里混用内联media属性和外部文件中的媒体查询，容易触发解析时序问题
CSS 中用 vh 和 vw 在 iPad 上表现异常
iPadOS 的 Safari 对视口单位有特殊行为：地址栏收起/展开时，vh 会跳变（比如从 100vh 突然变成 90vh），导致布局抖动。这不是 bug，是浏览器为留出 UI 控件做的主动调整。
稳妥做法：
- 关键高度（如全屏轮播容器）改用
min-height: 100dvh——dvh是「动态视口高度」，iOS 16+/iPadOS 16+ 支持，能响应地址栏变化 - 兼容旧系统？用 JS 监听
resize，动态设一个--vhCSS 变量：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 避免对
font-size大量使用vw，iPad 横竖屏切换时字体可能突变，建议用clamp()控制范围
用 prefers-reduced-motion 适配 iPadOS 的辅助设置
iPad 用户开启「减少动画」后，Safari 会触发 @media (prefers-reduced-motion: reduce)，但很多人只想到禁用 transition，忽略了更隐蔽的影响：比如 scroll-behavior: smooth 会被静默降级，transform: scale() 动画也会卡顿或跳帧。
实操建议：
- 把所有带
animation或transition的规则包进该媒体查询里，并统一设为none或0s - 慎用
will-change，它在 reduced motion 下可能引发重绘异常，尤其配合position: sticky时 - 测试时别只点设置开关，要重启 Safari 进程（双击 Home / 侧边滑动关闭），否则部分样式不会实时刷新
最易被忽略的是：iPad 的「放大显示」辅助功能（Settings > Accessibility > Display & Text Size > Larger Text）会改变根字号，但不触发 rem 重算——得靠 font-size: clamp() 或 JS 监听 textSizeAdjust 才能稳住排版。
