uni-app 开了screenOrientation后，安卓首页在横竖屏切换时宽高不对

在 uni-app 中，当你启用 screenOrientation 锁定屏幕方向后，如果遇到在安卓设备上横竖屏切换时页面宽高不对的问题，这通常是因为页面布局没有很好地适应屏幕方向的改变，或者页面生命周期和事件处理不当。以下是一些可能帮助解决问题的代码示例和思路。

1. 确保页面布局自适应

首先，确保你的页面布局是响应式的，能够自适应不同方向的屏幕尺寸。使用 vw 和 vh 单位，或者 Flexbox、Grid 布局等现代 CSS 技术可以帮助实现这一目标。

/* 示例：使用 Flexbox 实现自适应布局 */
.container {
  display: flex;
  flex-direction: column; /* 竖屏默认 */
  height: 100vh;
  width: 100vw;
}

@media (orientation: landscape) {
  .container {
    flex-direction: row; /* 横屏时改为横向布局 */
  }
}

2. 监听屏幕方向变化

在 uni-app 中，你可以通过监听 onResize 事件或者自定义的页面生命周期函数来处理屏幕方向的变化。

export default {
  onReady() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
  },
  onUnload() {
    // 移除监听器
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 处理屏幕方向变化后的逻辑
      console.log('Screen size changed:', window.innerWidth, window.innerHeight);
      // 可以根据需要调整页面布局或重新计算样式
    }
  }
};

3. 使用 uni.getSystemInfoSync 获取屏幕信息

在必要时，你可以使用 uni.getSystemInfoSync 方法获取当前设备的屏幕信息，包括屏幕宽度、高度和方向等，以便更精确地控制页面布局。

const systemInfo = uni.getSystemInfoSync();
console.log('Screen width:', systemInfo.screenWidth);
console.log('Screen height:', systemInfo.screenHeight);
console.log('Orientation:', systemInfo.orientation); // landscape 或 portrait

// 根据屏幕方向调整布局
if (systemInfo.orientation === 'landscape') {
  // 横屏布局调整
} else {
  // 竖屏布局调整
}

4. 注意事项

• 确保 manifest.json 中正确配置了 screenOrientation。
• 测试时，注意不同安卓设备和版本的差异，某些设备或版本可能对屏幕方向的处理有所不同。
• 如果使用第三方插件或框架，检查它们是否对屏幕方向处理有特定要求或限制。

通过上述方法，你应该能够解决 uni-app 在安卓设备上横竖屏切换时宽高不对的问题。