# 響應(yīng)顯示區(qū)域變化

# 顯示區(qū)域尺寸

顯示區(qū)域指小程序界面中可以自由布局展示的區(qū)域。在默認(rèn)情況下，小程序顯示區(qū)域的尺寸自頁(yè)面初始化起就不會(huì)發(fā)生變化。但以下三種方式都可以改變這一默認(rèn)行為。

# 在手機(jī)上啟用屏幕旋轉(zhuǎn)支持

從小程序基礎(chǔ)庫(kù)版本 2.4.0 開(kāi)始，小程序在手機(jī)上支持屏幕旋轉(zhuǎn)。使小程序中的頁(yè)面支持屏幕旋轉(zhuǎn)的方法是：在 app.json 的 window 段中設(shè)置 "pageOrientation": "auto" ，或在頁(yè)面 json 文件中配置 "pageOrientation": "auto" 。

以下是在單個(gè)頁(yè)面 json 文件中啟用屏幕旋轉(zhuǎn)的示例。

代碼示例：

{
  "pageOrientation": "auto"
}

如果頁(yè)面添加了上述聲明，則在屏幕旋轉(zhuǎn)時(shí)，這個(gè)頁(yè)面將隨之旋轉(zhuǎn)，顯示區(qū)域尺寸也會(huì)隨著屏幕旋轉(zhuǎn)而變化。

從小程序基礎(chǔ)庫(kù)版本 2.5.0 開(kāi)始， pageOrientation 還可以被設(shè)置為 landscape ，表示固定為橫屏顯示。

# 在 iPad 上啟用屏幕旋轉(zhuǎn)支持

從小程序基礎(chǔ)庫(kù)版本 2.3.0 開(kāi)始，在 iPad 上運(yùn)行的小程序可以支持屏幕旋轉(zhuǎn)。使小程序支持 iPad 屏幕旋轉(zhuǎn)的方法是：在 app.json 中添加 "resizable": true 。

代碼示例：

{
  "resizable": true
}

如果小程序添加了上述聲明，則在屏幕旋轉(zhuǎn)時(shí)，小程序?qū)㈦S之旋轉(zhuǎn)，顯示區(qū)域尺寸也會(huì)隨著屏幕旋轉(zhuǎn)而變化。注意：在 iPad 上不能單獨(dú)配置某個(gè)頁(yè)面是否支持屏幕旋轉(zhuǎn)。

# 啟用大屏模式

從小程序基礎(chǔ)庫(kù)版本 2.21.3 開(kāi)始，在 Windows、Mac、車(chē)機(jī)、安卓 WMPF 等大屏設(shè)備上運(yùn)行的小程序可以支持大屏模式?？蓞⒖?a target="_blank" rel="noopener noreferrer">小程序大屏適配指南。方法是：在 app.json 中添加 "resizable": true 。

代碼示例：

{
  "resizable": true
}

如果小程序添加了上述聲明，在大屏設(shè)備上運(yùn)行時(shí)，小程序的默認(rèn)窗口尺寸將會(huì)變大，同時(shí)用戶(hù)可以自由拉伸。

# Media Query

有時(shí)，對(duì)于不同尺寸的顯示區(qū)域，頁(yè)面的布局會(huì)有所差異。此時(shí)可以使用 media query 來(lái)解決大多數(shù)問(wèn)題。

代碼示例：

.my-class {
  width: 40px;
}

@media (min-width: 480px) {
  /* 僅在 480px 或更寬的屏幕上生效的樣式規(guī)則 */
  .my-class {
    width: 200px;
  }
}

在 WXML 中，可以使用 match-media 組件來(lái)根據(jù) media query 匹配狀態(tài)展示、隱藏節(jié)點(diǎn)。

此外，可以在頁(yè)面或者自定義組件 JS 中使用 this.createMediaQueryObserver() 方法來(lái)創(chuàng)建一個(gè) MediaQueryObserver 對(duì)象，用于監(jiān)聽(tīng)指定的 media query 的匹配狀態(tài)。

在開(kāi)發(fā)者工具中預(yù)覽效果

# 屏幕旋轉(zhuǎn)事件

有時(shí)，僅僅使用 media query 無(wú)法控制一些精細(xì)的布局變化。此時(shí)可以使用 js 作為輔助。

在 js 中讀取頁(yè)面的顯示區(qū)域尺寸，可以使用 selectorQuery.selectViewport 。

頁(yè)面尺寸發(fā)生改變的事件，可以使用頁(yè)面的 onResize 來(lái)監(jiān)聽(tīng)。對(duì)于自定義組件，可以使用 resize 生命周期來(lái)監(jiān)聽(tīng)?；卣{(diào)函數(shù)中將返回顯示區(qū)域的尺寸信息。（從基礎(chǔ)庫(kù)版本 2.4.0 開(kāi)始支持。）

代碼示例：

Page({
  onResize(res) {
    res.size.windowWidth // 新的顯示區(qū)域?qū)挾?/span>
    res.size.windowHeight // 新的顯示區(qū)域高度
  }
})

Component({
  pageLifetimes: {
    resize(res) {
      res.size.windowWidth // 新的顯示區(qū)域?qū)挾?/span>
      res.size.windowHeight // 新的顯示區(qū)域高度
    }
  }
})

此外，還可以使用 wx.onWindowResize 來(lái)監(jiān)聽(tīng)（但這不是推薦的方式）。

# 注意事項(xiàng)

• Bug： Android 微信版本 6.7.3 中， live-pusher 組件在屏幕旋轉(zhuǎn)時(shí)方向異常。