uni-app 最新版本3.4.7 无法横屏

uni-app 最新版本3.4.7 无法横屏

信息类别 详情
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 macOS Big Sur 11.5.2
HBuilderX 正式
HBuilderX版本号 3.4.7
手机系统 iOS
手机版本号 iOS 15
手机厂商 苹果
手机机型 iphone 12 x
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

无法横屏无法横屏无法横屏 无法横屏无法横屏无法横屏无法横屏无法横屏

操作步骤：

百试百不灵

预期结果：

需要横屏

实际结果：

无法横屏

更多关于uni-app 最新版本3.4.7 无法横屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

最新发现：是自定义基座无法横屏

更多关于uni-app 最新版本3.4.7 无法横屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


此设备在旧版是否正常？请提供可复现bug的最小化demo（上传附件），让我们及时定位问题 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

已解决。https://ask.dcloud.net.cn/question/137901

在 uni-app 中，默认情况下，应用是竖屏显示的。如果你希望应用支持横屏，需要进行一些配置和代码调整。以下是一些可能的解决方案：

1. 配置 manifest.json

在 manifest.json 文件中，你可以配置应用的屏幕方向。找到 app-plus 节点，添加 screenOrientation 配置：

{
  "app-plus": {
    "screenOrientation": [
      "portrait-primary",
      "landscape-primary",
      "portrait-secondary",
      "landscape-secondary"
    ]
  }
}
  • portrait-primary：竖屏（正常方向）
  • landscape-primary：横屏（正常方向）
  • portrait-secondary：竖屏（倒置方向）
  • landscape-secondary：横屏（倒置方向）

2. 使用 plus.screen.lockOrientation

你可以在页面加载时，通过 plus.screen.lockOrientation 方法来锁定屏幕方向。例如：

onLoad() {
  if (uni.getSystemInfoSync().platform === 'ios' || uni.getSystemInfoSync().platform === 'android') {
    plus.screen.lockOrientation('landscape-primary');
  }
}

3. 使用 CSS 强制横屏

如果你只是希望在某个页面中强制横屏，可以通过 CSS 来实现：

/* 强制横屏 */
@media screen and (orientation: portrait) {
  body {
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

4. 检查设备支持

确保你的设备支持横屏显示。有些设备可能默认不支持横屏，或者需要手动开启横屏模式。

5. 更新 uni-app 版本

如果你使用的是较旧的 uni-app 版本，建议更新到最新版本，以确保你使用的是最新的功能和修复。

6. 检查插件或依赖

如果你使用了某些插件或依赖库，可能会影响屏幕方向的设置。检查是否有插件或库与屏幕方向设置冲突。

7. 使用 uni.setScreenOrientation

uni-app 提供了 uni.setScreenOrientation 方法来设置屏幕方向：

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

8. 检查平台差异

不同平台（如 iOS 和 Android）对屏幕方向的处理可能有所不同，确保你的代码在不同平台上都能正常工作。

9. 使用 plus.screen.setOrientation

你还可以使用 plus.screen.setOrientation 方法来设置屏幕方向：

plus.screen.setOrientation('landscape-primary');
回到顶部