微信小程序 屏幕旋转

在 iPad 上启用屏幕旋转（基础库 2.3.0）

在 app.json 中，添加 resizable 字段

{
  "resizable": true
}

resizable 值为 true 或 false

在手机上启用屏幕旋转

全局启用：在 app.json 的 window 字段中，添加 pageOrientation 字段

{
  "window": {
    "pageOrientation": "auto"
  }
}

页面启用：在页面的 json 文件中，添加 pageOrientation 字段

{
  "pageOrientation": "auto"
}

pageOrientation 的可选值

值	说明	版本
portrait	竖屏
auto	自动旋转	基础库 2.4.0
landscape	横屏	基础库 2.5.0

监听屏幕旋转

在页面中：页面的生命周期函数 onResize (基础库 2.4.0)

Component({
  pageLifetimes: {
    resize(event) {
      console.log('屏幕方向', event.deviceOrientation)
      console.log('窗口宽高：', event.size.windowWidth, event.size.windowHeight)
      console.log('屏幕宽高：', event.size.screenWidth, event.size.screenHeight)
    }
  }
})

在组件中：组件所在页面的生命周期函数 resize (基础库 2.4.0)

Component({
  pageLifetimes: {
    resize(event) {
      console.log('屏幕方向', event.deviceOrientation)
      console.log('窗口宽高：', event.size.windowWidth, event.size.windowHeight)
      console.log('屏幕宽高：', event.size.screenWidth, event.size.screenHeight)
    }
  }
})

通过 wx.onWindowResize 监听（基础库 2.3.0）

wx.onWindowResize((event) => {
  console.log('屏幕方向', event.deviceOrientation)
  console.log('窗口宽高：', event.size.windowWidth, event.size.windowHeight)
  console.log('屏幕宽高：', event.size.screenWidth, event.size.screenHeight)
})