uniapp app端如何实现重力感应横竖屏切换

在uniapp开发的APP中，如何实现根据设备重力感应自动切换横竖屏？目前尝试在pages.json中配置"orientation": “auto”，但部分安卓机型无效。是否需要额外调用原生API或监听重力感应事件？求具体实现方案和兼容性处理方式。

2 回复

在uniapp的app端，可以通过plus.screen.lockOrientation()方法锁定屏幕方向。在pages.json中配置页面横竖屏设置，使用onOrientationChange监听方向变化，实现重力感应切换。


在 UniApp 中，App 端实现重力感应横竖屏切换可以通过以下步骤完成：

1. 配置 manifest.json

在 manifest.json 的 app-plus 节点下设置屏幕方向：

{
  "app-plus": {
    "screenOrientation": [
      "portrait-primary", // 竖屏
      "landscape-primary" // 横屏
    ]
  }
}

2. 使用 JavaScript API 动态切换

通过 plus.screen 和 plus.orientation 控制方向：

// 锁定竖屏
plus.screen.lockOrientation('portrait-primary');

// 锁定横屏
plus.screen.lockOrientation('landscape-primary');

// 解锁方向（恢复重力感应）
plus.screen.unlockOrientation();

3. 监听方向变化

// 添加方向变化监听
plus.orientation.addEventListener('orientationchange', function(res) {
  console.log('当前方向:', res.orientation);
  // 根据方向更新界面
  if (res.orientation === 'landscape-primary') {
    // 横屏逻辑
  } else {
    // 竖屏逻辑
  }
});

4. 注意事项

  • 平台差异：仅 App 端有效，H5 和小程序不支持。
  • 权限配置：部分安卓设备可能需要重力感应权限。
  • 页面适配：横竖屏切换时需通过 CSS 媒体查询或 JS 动态调整布局：
    [@media](/user/media) screen and (orientation: landscape) {
  /* 横屏样式 */
}

完整示例

export default {
  methods: {
    setLandscape() {
      if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
        plus.screen.lockOrientation('landscape-primary');
      }
    },
    setPortrait() {
      plus.screen.lockOrientation('portrait-primary');
    }
  },
  onLoad() {
    // 启动时监听方向
    plus.orientation.addEventListener('orientationchange', (res) => {
      uni.showToast({ title: `方向: ${res.orientation}`, icon: 'none' });
    });
  }
}

通过以上配置和代码即可实现重力感应横竖屏切换。

回到顶部