移动端方向判断不能只靠aspect-ratio，因其仅匹配宽高比而非真实横竖屏；应优先使用orientation媒体特性，并结合max-width/min-height等临界值兜底，复杂场景需js实时检测window.innerwidth与innerheight。
移动端设备方向判断不能只靠 aspect-ratio
aspect-ratio 是 CSS 媒体查询中用于匹配宽高比的属性，但它本身不感知“横屏”或“竖屏”——它只看容器的宽高比例。比如 aspect-ratio: 16/9 匹配的是宽高比为 16:9 的视口，而 iPhone 14 竖屏时是 9/19.5 ≈ 0.46，横屏时是 19.5/9 ≈ 2.17，两者都不等于 16/9。直接用 aspect-ratio 判断方向，极易误判，尤其在折叠屏、平板、带刘海/挖孔的设备上。
真正可靠的方案：用 orientation 媒体特性 + 宽高临界值兜底
orientation（portrait / landscape）仍是目前最广泛支持、语义最明确的方向判断方式。它基于 viewport 的初始宽高关系，浏览器原生支持，兼容性好（iOS Safari ≥ 5.1，Android Browser ≥ 4.0）。
但要注意它的局限性：
- 仅在 viewport 尺寸变化时触发（如旋转），不会响应软键盘弹出导致的视口高度压缩
- 某些 Android WebView 或 PWA 中可能延迟或失效
- 折叠屏设备（如 Galaxy Z Fold）展开后仍可能报告
portrait，需结合screen.width和screen.heightJS 辅助判断
推荐组合写法：
@media (orientation: portrait) and (max-width: 768px) {
.layout { grid-template-rows: auto 1fr auto; }
}
@media (orientation: landscape) and (min-height: 400px) {
.layout { grid-template-columns: 200px 1fr; }
}
为什么不要用 aspect-ratio 替代方向判断？
aspect-ratio 的设计目标是响应式布局适配（比如视频容器、卡片网格），不是设备方向检测。常见误用场景：
- 写成
@media (aspect-ratio: 1/1)期望匹配正方形屏幕 —— 实际几乎没有消费级手机满足 - 用
@media (aspect-ratio >= 1)当作横屏条件 —— 但很多竖屏手机（如 Pixel 7）宽高比已 > 1（≈ 1.09），会错误命中 - 忽略缩放、字体大小设置对视口计算的影响，导致比例漂移
如果你确实需要比例敏感布局（比如全屏 Canvas 自适应），应单独使用 aspect-ratio，并和 orientation 解耦：
@media (orientation: landscape) and (aspect-ratio >= 16/9) {
canvas { width: 100vw; height: auto; }
}
复杂点在于“动态方向感知”，纯 CSS 不够用
CSS 媒体查询只能响应 viewport 尺寸变化，无法感知以下真实场景：
- 用户横握手机但未触发 orientation 变更（比如强制竖屏 App 内嵌页）
- 桌面端拖拽浏览器窗口导致宽高比突变，但逻辑上不该算“横屏”
- WebGL 或 video 元素需要精确的
window.innerWidth / window.innerHeight实时比值
这时必须配合 JS：
function updateOrientation() {
const isLandscape = window.innerWidth > window.innerHeight;
document.documentElement.dataset.orientation = isLandscape ? 'landscape' : 'portrait';
}
window.addEventListener('resize', updateOrientation);
updateOrientation(); // 初始化
再通过 [data-orientation="landscape"] 在 CSS 中做精细化控制。这点容易被忽略：CSS 的 orientation 是声明式的、有延迟的，而真实交互需要即时、确定的布尔值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
