建站
咨詢
售后
建站咨詢
新聞中心
響應(yīng)顯示區(qū)域變化
顯示區(qū)域尺寸
顯示區(qū)域指小程序界面中可以自由布局展示的區(qū)域。在默認(rèn)情況下，小程序顯示區(qū)域的尺寸自頁(yè)面初始化起就不會(huì)發(fā)生變化。但以下兩種方式都可以改變這一默認(rèn)行為。
十多年的青州網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整青州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“青州網(wǎng)站設(shè)計(jì)”,“青州網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
在手機(jī)上啟用屏幕旋轉(zhuǎn)支持
從小程序基礎(chǔ)庫(kù)版本 2.4.0 開始，小程序在手機(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 開始， pageOrientation 還可以被設(shè)置為 landscape ，表示固定為橫屏顯示。
在 iPad 上啟用屏幕旋轉(zhuǎn)支持
從小程序基礎(chǔ)庫(kù)版本 2.3.0 開始，在 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)。
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)。
屏幕旋轉(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 開始支持。）
代碼示例：
Page({
onResize(res) {
res.size.windowWidth // 新的顯示區(qū)域?qū)挾? res.size.windowHeight // 新的顯示區(qū)域高度
}
})
Component({
pageLifetimes: {
resize(res) {
res.size.windowWidth // 新的顯示區(qū)域?qū)挾? res.size.windowHeight // 新的顯示區(qū)域高度
}
}
})
此外，還可以使用 wx.onWindowResize 來(lái)監(jiān)聽(tīng)（但這不是推薦的方式）。
Bug & tips:
- Bug： Android 微信版本 6.7.3 中， live-pusher 組件在屏幕旋轉(zhuǎn)時(shí)方向異常。
分享名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序響應(yīng)顯示區(qū)域變化
標(biāo)題URL：http://fisionsoft.com.cn/article/dhcijjd.html
