只用 orientation: landscape 会漏判或误判横屏，因其依赖系统上报值而非实时宽高比，iPad竖放、键盘弹出、折叠屏半展开时易失效；可靠方案是组合 min-aspect-ratio: 13/9 或 max-height: 480px and min-width: 640px，并显式声明 screen 类型。
只用 orientation: landscape 会漏判或误判横屏
很多开发者一上来就写 @media (orientation: landscape)，结果在 iPad 竖放时（min-width: 768px 触发）、小屏手机弹出虚拟键盘、Android 折叠屏半展开等场景下，样式被错误应用。根本原因是 orientation 是系统上报值，不是实时宽高比计算结果，加载瞬间还可能为空。
更可靠的做法是组合使用：
-
@media screen and (min-aspect-ratio: 13/9)—— 13:9 ≈ 1.44，覆盖主流横屏设备实际比例，比单纯orientation稳定得多 -
@media screen and (max-height: 480px) and (min-width: 640px)—— 针对 iPhone SE、Pixel 等小屏横置的典型尺寸区间 - 必须显式带上
screen类型，否则旧 Android 浏览器可能忽略规则
横屏游戏容器不能只靠 transform: rotate(90deg)
H5 游戏里常见“假横屏”写法：width: 100vh; height: 100vw; transform: rotate(90deg)。它在真机上会导致触摸坐标错乱、Canvas 渲染偏移、fixed 元素定位失效，尤其在 iOS Safari 中滚动卡顿明显。
真正可用的方案只有两种：
立即学习“前端免费学习笔记（深入）”；
- 纯 Web 项目：用
@media screen and (orientation: landscape)+ 显式重设布局方向（如flex-direction: row、grid-template-columns: repeat(6, 1fr)） - App 打包项目（uni-app / Cordova / Capacitor）：必须改原生配置——iOS 在
ios/manifest.json加UISupportedInterfaceOrientations，Android 在AndroidManifest.xml设screenOrientation="landscape"；uni.setScreenOrientation()在 App 端基本无效
横屏下 object-fit 和 object-position 必须按方向拆开写
游戏 UI 图片（比如角色头像、技能图标）在横竖屏下最佳裁剪焦点往往相反。例如竖屏用 object-position: 50% 10% 保脸，横屏却要 object-position: 10% 50% 保肩线构图——只写一个规则，必然有一边切掉关键内容。
正确写法是分方向声明：
@media screen and (orientation: portrait) {
.avatar { object-position: 50% 10%; }
}
@media screen and (orientation: landscape) {
.avatar { object-position: 10% 50%; }
}
注意：object-position 只在 object-fit: cover 或 none 下生效；父容器必须有明确宽高，否则无参照系。
横屏后 vh/vw 单位会剧烈跳变，别直接用于字体和间距
竖屏时 100vh 是 812px（iPhone X），横屏变成 375px，font-size: 4vw 会从 32px 突降到 15px，文字瞬间糊成一团。
安全做法是限制弹性范围：
- 字号改用
clamp(16px, 4vw, 20px)，把 vw 锁死在合理区间 - 留白类
padding、margin改用rem+ 媒体查询微调，例如横屏时padding: 1.25rem→1.5rem - 如果用了
viewport的user-scalable=no，横屏后用户无法缩放，此时更要确保点击区域 ≥ 44px，行高 ≥ 1.5
最常被忽略的是：横屏时 Flex/Grid 容器不会自动翻转主轴，flex-direction 和 grid-template-columns 必须手动重设，否则布局塌陷或换行异常——这不是 bug，是 CSS 的设计逻辑。
