应避免用 min-width: 768px 单独判断 iPad，因其在不同设备上差异巨大；推荐组合 hover: hover 或 pointer: fine 等交互能力特征，并配合 viewport 设置，以更可靠地逼近真实使用意图。
别用 min-width: 768px 判断 iPad
这个值在 2010 年对应初代 iPad 竖屏逻辑像素，现在完全不可靠：iPad Pro 11 英寸横屏视口是 834px，而某些安卓平板分屏后只剩 540px；iPhone 14 Pro Max 横屏也有 932px。单靠宽度，@media (min-width: 768px) 会把大屏手机当平板，又把小尺寸安卓平板当手机。
用 hover + min-width 组合识别可悬停的平板
iPad（含 iPadOS 15+）支持 hover: hover，绝大多数纯触屏手机不支持。结合合理宽度区间，能筛掉误判：
-
@media (min-width: 768px) and (hover: hover)：覆盖 iPad、Surface Go、MacBook 等，排除 iPhone 和多数安卓手机 - 避免写成
(hover: none)——它在桌面浏览器里也常为true，不可靠 - 注意 Safari 在“请求桌面版”模式下可能临时启用
hover，但真实用户场景中影响极小
用 pointer: fine 捕捉带笔/鼠标的平板操作能力
这不是识别“是不是 iPad”，而是识别“能不能做精细交互”。对需要手写笔或外接鼠标的功能（如绘图工具、表格编辑），这个特性比设备型号更有意义：
-
@media (min-width: 768px) and (pointer: fine)：命中 iPad + Apple Pencil、MatePad Pro + M-Pencil、Surface Pro - 它和
hover不互斥，但更聚焦输入精度——有些 iPad 模式下hover可能被禁用，而pointer: fine仍稳定可用 - 不要单独用它做布局断点，因为部分大屏手机开启辅助指针时也会返回
fine
必须配 <meta name="viewport" content="width=device-width">
没有这行，min-width 和 orientation 都可能失效。尤其 iOS Safari，漏掉 width=device-width 会导致旋转后视口不重算，@media (orientation: landscape) 根本不触发。常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 写成
width=375或其他固定值 - JS 动态插入 meta 标签，但晚于 CSS 解析时机
- 微信小程序 WebView 中未显式设置，依赖默认行为（不保险）
真正难的不是写对那几行 @media，而是接受：你无法 100% 精准识别“iPad”，只能根据能力组合逼近真实使用意图。宽度只是线索之一，hover、pointer、device-pixel-ratio 才是更稳的锚点。
