关键在于结合 orientation 与宽度/高度范围双重判断视口：竖屏≥768px 为平板/桌面，横屏≤430px 为小屏手机，横屏≥768px 为平板横屏；需以内容布局临界点定断点，并确保 viewport meta 正确前置。
平板竖屏和手机横屏的视口宽度经常重叠（比如都是 600–768px），单靠 min-width 或 max-width 容易误判。关键不是“设备类型”，而是“当前可用空间与使用场景”的组合判断。
用 orientation + 宽度范围双重锁定
只看宽度会把大屏手机横屏当成平板竖屏，只看方向又无法区分小屏横屏和大屏竖屏。必须叠加条件：
-
@media (orientation: portrait) and (min-width: 768px)→ 真正的平板/桌面竖屏（避开手机） -
@media (orientation: landscape) and (max-width: 500px)→ 小屏手机横屏（如 iPhone 14 Pro 横屏约 430px） -
@media (orientation: landscape) and (min-width: 768px)→ 平板横屏主流区间（iPad、Surface Go 等）
避免依赖固定断点，改用内容驱动的阈值
768px 是历史参考值，不是铁律。实际应观察布局何时“撑不开”或“挤不下”：
- 当卡片从单列变为双列时的宽度，就是你的第一个断点
- 当导航栏文字开始换行、按钮间距过紧时，就是需要调整的信号
- 用浏览器 DevTools 拖动窗口宽度，记录这些临界点，而不是查设备参数表
viewport 设置必须正确且前置
所有媒体查询生效的前提是：viewport meta 标签必须放在 <head> 最开头，且含 width=device-width：
立即学习“前端免费学习笔记（深入）”；
- 缺了它，iOS 和 Android 浏览器默认以 980px 渲染，
orientation和宽度查询全失效 - 别写
width=375或user-scalable=no，后者会干扰 orientation 判断 - 验证方式：在 Chrome 模拟 iPad 横屏，Elements 面板中查看
document.documentElement.clientWidth是否接近 1024
对小尺寸横屏设备做兜底判断
部分安卓平板横屏后 viewport 宽度仍只有 600px 左右（受系统 UI 或缩放影响），容易被归入手机样式。可补充高度维度：
-
@media (orientation: landscape) and (max-height: 480px)→ 锁定紧凑型横屏（如 7 英寸平板） -
@media (orientation: landscape) and (min-aspect-ratio: 16/9)→ 用宽高比过滤，比单纯看 width 更稳定 - 慎用
screen.width：它返回物理像素，和 CSS 媒体查询无关，不可靠
