uniapp如何强制横屏显示页面

“在uniapp开发中，如何实现强制横屏显示特定页面？我在manifest.json里配置了全局竖屏，但有个视频播放页面需要横屏展示。尝试过plus.screen.lockOrientation方法，在安卓端生效但iOS无效，请问有没有跨平台的解决方案？或者需要针对不同平台做特殊处理吗？”

2 回复

在 UniApp 中强制横屏显示页面，可以通过以下步骤实现：

  1. 配置 pages.json
    在对应页面的 style 中设置 "pageOrientation": "landscape"，例如：

    {
  "path": "pages/index/index",
  "style": {
    "pageOrientation": "landscape"
  }
}

    此配置仅对当前页面生效，全局配置需在 globalStyle 中声明。

  2. 动态修改横屏（仅部分平台支持）
    使用 uni.setPageOrientation 方法：

    uni.setPageOrientation({ orientation: 'landscape' });

    注意：部分平台（如小程序）可能限制动态修改，需提前在配置中声明。

  3. 处理兼容性

    • H5：可通过 CSS 媒体查询强制横屏样式，但无法锁定设备方向。
    • App：需在 manifest.json 的 plus 节点下配置屏幕方向，例如：
      "app-plus": {
  "screenOrientation": ["landscape-primary", "landscape-secondary"]
}

总结：优先通过 pages.json 静态配置，动态调整需注意平台限制。


在 UniApp 中，可以通过以下方法强制页面横屏显示：

1. 全局配置（pages.json）

在 pages.json 中针对特定页面配置屏幕方向：

{
  "pages": [
    {
      "path": "pages/landscape/landscape",
      "style": {
        "pageOrientation": "landscape" // 强制横屏
      }
    }
  ]
}

注意：pageOrientation 支持 auto（自动）、portrait（竖屏）、landscape（横屏）。

2. 动态修改屏幕方向

使用 uni.setScreenOrientation API 动态调整：

// 强制横屏
uni.setScreenOrientation({
  orientation: 'landscape'
})

// 恢复竖屏
uni.setScreenOrientation({
  orientation: 'portrait'
})

3. 注意事项

  • 平台差异：
    • 微信小程序需在 app.json 中配置 "pageOrientation": "auto" 支持横屏。
    • APP 端支持直接使用，部分安卓设备可能需要原生配置。
  • CSS 适配：横屏后需通过 CSS 媒体查询调整布局：
    [@media](/user/media) (orientation: landscape) {
  .content {
    transform: rotate(90deg);
  }
}

4. 示例代码（动态切换）

<template>
  <view>
    <button @click="setLandscape">切换横屏</button>
    <button @click="setPortrait">切换竖屏</button>
  </view>
</template>

<script>
export default {
  methods: {
    setLandscape() {
      uni.setScreenOrientation({ orientation: 'landscape' })
    },
    setPortrait() {
      uni.setScreenOrientation({ orientation: 'portrait' })
    }
  }
}
</script>

总结

  • 优先使用 pages.json 配置固定横屏页面。
  • 需动态切换时调用 uni.setScreenOrientation。
  • 注意测试不同平台的兼容性。
回到顶部