orientation媒体查询常不生效，因仅在有方向传感器且浏览器支持时可靠；桌面端多忽略，移动端需未锁定竖屏并实际旋转设备；推荐用min-width替代，或用matchmedia动态监听。
orientation媒体查询为什么没生效
常见现象是写了@media (orientation: landscape)但横屏时样式完全不触发，根本原因是：这个查询只在设备有明确物理方向传感器、且浏览器支持orientation事件时才可靠；很多桌面浏览器（包括Chrome DevTools的模拟器）会忽略它，或始终返回portrait。
真正起作用的场景集中在移动端WebView和原生App内嵌浏览器，且必须满足两个条件：页面未被强制锁定竖屏（如iOS的screen.orientation.lock('portrait')）、用户实际旋转了设备而非仅缩放窗口。
- 优先用
@media (min-width: 768px)替代——横屏平板通常视口宽度≥768px，比依赖orientation更稳定 - 如果必须用orientation，请搭配
window.matchMedia监听变化，而不是只写CSS规则 - 注意Safari对
orientation的支持较晚，iOS 15之前部分机型不识别
如何用matchMedia动态响应横屏切换
比起纯CSS，用JavaScript主动监听能避免“转过去没反应”的问题，也方便做动画或状态同步。
关键点在于：不能只监听一次，要持续跟踪；且需处理初始状态——页面加载时可能已是横屏，但matchMedia不会自动触发回调。
- 用
const media = window.matchMedia('(orientation: landscape)')创建监听器 - 立即检查
media.matches获取当前状态，再调用media.addEventListener('change', handler) - 在handler里直接操作DOM或切换class，例如：
document.body.classList.toggle('landscape-mode', media.matches) - 别忘了在组件卸载时调用
media.removeEventListener，否则内存泄漏
横屏下viewport设置容易踩的坑
即使CSS和JS都正常，横屏时页面仍可能被缩放、滚动条错位，大概率是<meta name="viewport">配置不当。
典型错误是写成width=device-width, initial-scale=1.0后，横屏时视口宽度变大，但内容没适配，导致横向溢出或字体过小。
- 去掉
maximum-scale和user-scalable=no——它们会阻止用户双指缩放，也让横屏体验僵硬 - 考虑加
viewport-fit=cover（尤其iOS），避免刘海屏横屏时内容被裁切 - 如果横屏需全屏展示，可配合
screen.orientation.lock('landscape')，但必须用户手势触发（如点击按钮），否则会被浏览器拒绝
横屏布局的CSS实用技巧
单纯靠media query切换样式不够，横屏常伴随交互逻辑变化，比如导航栏从底部移到右侧、按钮变大、文字换行方式调整。
重点不是“怎么写横屏样式”，而是“怎么让横屏样式不破坏竖屏结构”。核心思路是：用独立class控制横屏专属行为，而非覆盖所有属性。
- 给body加
landscape类后，只改关键尺寸：.landscape .nav { width: 80px; height: 100vh; }，而不是重写整个导航 - 慎用
transform: rotate(90deg)强行旋转容器——会导致文本渲染模糊、触摸坐标错乱 - 横屏时
vh单位可能不准（地址栏收起/展开影响），建议用dvh（dynamic viewport height）替代，但注意兼容性（Chrome 103+、Safari 16.4+）
横屏支持最麻烦的从来不是代码写法，而是测试环节：真机旋转延迟、WebView缓存orientation状态、某些安卓厂商ROM屏蔽方向事件——这些没法靠CSS解决，得在真实设备上逐个验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
