css中@media (orientation: portrait/landscape)仅在移动设备可靠，桌面无效；rotate()不改变文档流致布局错乱，应优先用flex/grid重构，必要时配合transform-origin、尺寸交换及pointer-events修复。
orientation媒介查询在CSS里怎么写
只支持portrait和landscape两个值，不能写vertical或horizontal——后者是JS里的window.orientation用法，CSS里无效。它只在移动设备（含平板）的浏览器中可靠触发，桌面浏览器基本不响应方向变化，哪怕你手动缩放窗口也不会触发。
常见错误是把它当“旋转检测器”用：比如想让某个div在横屏时顺时针转90度，就直接套@media (orientation: landscape) { transform: rotate(90deg); }——这会出问题，因为：
- 旋转后元素宽高逻辑没变，可能撑破容器或遮挡其他内容
- 没有重置
transform-origin，默认从中心转，视觉上偏移明显 - 没处理滚动条、固定定位等副作用
为什么rotate(90deg)之后页面布局乱了
根本原因是transform不改变文档流，但旋转后的视觉尺寸和交互热区仍按原始矩形计算。比如一个width: 300px; height: 200px;的盒子横屏时转90度，它看起来是竖着的，但浏览器仍认为它占着300×200的空间，下方元素不会自动“上移”填空。
更实际的问题是输入框、按钮点击区域错位，尤其是配合position: fixed时，旋转后坐标系混乱。
解决思路不是硬转元素，而是换布局方式：
- 优先用
flex-direction或grid-template-rows/columns重构结构，比transform更可控 - 真要用
rotate，必须同步设置transform-origin: top left;并用width/height手动交换值 - 加
overflow: hidden防内容溢出，必要时用pointer-events: none禁用误触
orientation查询失效的几个典型场景
最常被忽略的是：iOS Safari在某些版本（如iOS 15.4之前）对@media (orientation: landscape)响应有延迟，甚至只在首次加载时生效，旋转后不重新计算。Android Chrome相对稳定，但WebView里也可能失效。
另一个坑是混合使用viewport元标签：user-scalable=no或maximum-scale=1会导致部分安卓机无法触发方向变更事件。
验证是否生效，直接在DevTools里手动切模拟器方向，别依赖真机冷启动——很多问题只在热切换时暴露：
- 检查
document.documentElement.clientWidth和.clientHeight是否随方向真正变化 - 用
matchMedia('(orientation: landscape)')在控制台监听，看.matches值是否实时更新 - 避免嵌套在
@supports里，有些浏览器不支持组合查询
替代方案：什么时候该放弃orientation，改用JavaScript
当你需要精确控制旋转动画节奏、要兼容桌面双屏拖拽、或要配合陀螺仪做倾斜响应时，CSS orientation就不够用了。它本质是宽高比启发式判断（width > height → landscape），不是真读传感器。
JS方案更直接：
- 监听
window.matchMedia('(orientation: landscape)')的change事件，比CSS媒体查询更易调试 - 用
window.innerHeight/window.innerWidth做兜底判断，绕过浏览器bug - 配合
screen.orientationAPI（注意兼容性，iOS不支持）获取真实方向值 - 旋转前先
getBoundingClientRect()存原始位置，避免transform导致的坐标漂移
真正难的不是怎么转，是怎么让转完之后的表单还能提交、滚动还能继续、返回按钮还在左上角——这些细节CSS搞不定，得靠JS补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
