關於微信小程序橫豎屏手機端及平板

一、關於微信小程序橫豎屏手機端及平板

在手機用屏幕旋轉支持

從小程序基礎庫版本 2.4.0 開始，小程序在手機上支持屏幕旋轉。使小程序中的頁面支持屏幕旋轉的方法是：在 app.json 的 window 段中設置 "pageOrientation": "auto" ，或在頁面 json 文件中配置 "pageOrientation": "auto" 。

以下是在單個頁面 json 文件中啟用屏幕旋轉的示例。

代碼示例：

{
  "pageOrientation": "auto"
}

如果頁面添加了上述聲明，則在屏幕旋轉時，這個頁面將隨之旋轉，顯示區域尺寸也會隨着屏幕旋轉而變化。

從小程序基礎庫版本 2.5.0 開始， pageOrientation 還可以被設置為 landscape ，表示固定為橫屏顯示。

在 iPad 上啟用屏幕旋轉支持

從小程序基礎庫版本 2.3.0 開始，在 iPad 上運行的小程序可以支持屏幕旋轉。使小程序支持 iPad 屏幕旋轉的方法是：在 app.json 中添加 "resizable": true 。

代碼示例：

{
  "resizable": true
}

如果小程序添加了上述聲明，則在屏幕旋轉時，小程序將隨之旋轉，顯示區域尺寸也會隨着屏幕旋轉而變化。注意：在 iPad 上不能單獨配置某個頁面是否支持屏幕旋轉。

屏幕旋轉事件

頁面尺寸發生改變的事件，可以使用頁面的 onResize 來監聽。對於自定義組件，可以使用 resize 生命周期來監聽。回調函數中將返回顯示區域的尺寸信息。（從基礎庫版本 2.4.0 開始支持。）

代碼示例：

Page({
  onResize(res) {
    res.size.windowWidth // 新的顯示區域寬度
    res.size.windowHeight // 新的顯示區域高度
  }
})