小程序 页面设置横屏

 1.在手机上启用屏幕旋转支持

方法一:

从小程序基础库版本 2.4.0 开始，小程序在手机上支持屏幕旋转。

使小程序中的页面支持屏幕旋转的方法是：在 app.json 的 window 段中设置 "pageOrientation": "auto" ，或在页面 json 文件中配置 "pageOrientation": "auto" 。

以下是在单个页面 json 文件中启用屏幕旋转的示例。

{
  "pageOrientation": "auto"
}

 那如何判断当前屏幕的方向呢？

可以在此页面的 js 文件中加入 onResize:function(res){} 方法来进行屏幕方向的监听，每次屏幕旋转时这个方法都会调用。

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

可以通过获取到的显示区域的宽度和高度来判断当前屏幕是横屏还是竖屏，然后显示不同的内容。注意，模拟器不会触发此方法，所以请使用真机调试 

方法二:

在小程序页面配置中设置  pageOrientation

属性	类型	默认值	描述	最低版本
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)

"deviceOrientation":"portrait",默认设置竖屏

如果页面添加了上述声明，则在屏幕旋转时，这个页面将随之旋转，显示区域尺寸也会随着屏幕旋转而变化。

从小程序基础库版本 2.5.0 开始， pageOrientation 还可以被设置为 landscape ，表示固定为横屏显示。

---

2023.03.27更新

2.在 iPad 上启用屏幕旋转支持

从小程序基础库版本 2.3.0 开始，在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是：在 app.json 中添加 "resizable": true 。

{
  "resizable": true
}

注意：在 iPad 上不能单独配置某个页面是否支持屏幕旋转。