@media (orientation: landscape) 不可靠，因其读取设备自然方向而非视口状态，iOS Safari 尤其失效；应改用 aspect-ratio + matchMedia 主动监听，并辅以 JS 校验。
@media (orientation: landscape) 在绝大多数实际场景中不可靠，不能作为横屏判断的唯一依据。
为什么 @media (orientation: landscape) 经常不触发
它读取的是设备的「自然方向」（natural orientation），不是当前视口状态。比如 iPad 竖着放但浏览器窗口被拖宽，orientation 仍返回 portrait；折叠屏展开、多窗口分屏时也常误判。iOS Safari 尤其明显：只在页面加载时检查一次，旋转后不重排，change 事件基本不触发。
- iOS 15+ 快速旋转容易漏掉事件，Chrome 某些版本甚至完全忽略该媒体查询
-
screen.orientation.type返回的值和@media (orientation: ...)并不总是一致，二者来源不同 - 它和
@media (min-aspect-ratio: 1/1)的触发逻辑完全不同，混用会干扰调试
更可靠的替代方案：用 aspect-ratio + matchMedia
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio，语义准确、响应及时：
@media (min-aspect-ratio: 1.2/1) {
/* 视口明显横置 */
.layout { grid-template-columns: 1fr 3fr; }
}
@media (max-aspect-ratio: 0.8/1) {
/* 视口明显竖置 */
.layout { grid-template-columns: 1fr; }
}
- 比
orientation更贴近真实视觉感受，不受设备物理朝向干扰 - 必须配合
window.matchMedia主动监听，首次加载也要手动检查mql.matches - 旧环境（如 Android WebView、老版 Safari）需降级为
min-width/max-height组合，例如：@media (min-width: 600px) and (max-height: 400px)
JS 配合 CSS 的最小可行闭环
纯 CSS 无法解决「用户横着拿手机但 zoom 很大导致视口变宽」这类窄屏横置问题，必须 JS 参与校验：
const mql = window.matchMedia('(min-aspect-ratio: 1/1)');
const update = () => {
document.body.classList.toggle('is-landscape', mql.matches);
};
mql.addEventListener('change', update);
update(); // 初始执行
- 不要依赖
window.orientation（已废弃），优先用screen.orientation或宽高比 fallback - 如果要强制视觉横屏（如扫码页），避免用
transform: rotate(90deg)——会导致触摸坐标错乱；改用writing-mode: vertical-lr+flex-direction: row-reverse -
缺失或写死宽度（如
width=375）会让所有基于width/height的媒体查询失效
真正难的不是写对一条 @media，而是理解「orientation 是设备属性，不是视口属性」——这个认知偏差，会让很多团队在 iOS 上反复踩坑两三个月才意识到问题不在 CSS 写法，而在前提假设错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
