微信小程序 显示区域与旋转

Question

小程序显示区域的尺寸自页面初始化起就不会发生变化

但是可以旋转

{
"pageOrientation": "auto"     // 手机上开启屏幕旋转
"pageOrientation": "landscape"        // 手机上固定横屏显示
//也可以单独设置某个 page
}

{
"resizable": true     // ipad 上开启屏幕旋转
// 不能单独设置某个 page
}

Media Query

.my-class { width: 40px; }
@media (min-width: 480px) {
/* 仅在 480px 或更宽的屏幕上生效的样式规则 */
.my-class { width: 200px; }
}

旋转屏幕事件

页面中

Page({
onResize(res) {
res.size.windowWidth // 新的显示区域宽度
res.size.windowHeight // 新的显示区域高度
}
})

自定义组件中

Component({
  pageLifetimes: {
    resize(res) {
      res.size.windowWidth // 新的显示区域宽度
      res.size.windowHeight // 新的显示区域高度
    }
  }
})

还可以使用 wx.onWindowResize 来监听（但这不是推荐的方式）。

获取屏幕窗口大小

selectorQuery.selectViewport