如何通过CSS媒体查询针对不同屏幕方向优化游戏横屏界面-css教程-PHP中文网

只用 orientation: landscape 会漏判或误判横屏，因其依赖系统上报值而非实时宽高比，ipad竖放、键盘弹出、折叠屏半展开时易失效；可靠方案是组合 min-aspect-ratio: 13/9 或 max-height: 480px and min-width: 640px，并显式声明 screen 类型。

如何通过css媒体查询针对不同屏幕方向优化游戏横屏界面

只用 `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% 保肩线构图——只写一个规则，必然有一边切掉关键内容。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确写法是分方向声明：

@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 下生效；父容器必须有明确宽高，否则无参照系。