屏幕旋转事件

读取页面的显示区域尺寸,可以使用 selectorQuery.selectViewport
页面尺寸发生改变的事件,可以使用 wx.onWindowResize 来监听。回调函数中将返回显示区域的尺寸信息。

wx.onWindowResize(function(res) {
res.size.windowWidth // 新的显示区域宽度
res.size.windowHeight // 新的显示区域高度

// 触发当前页面的 resized 方法
var currentPages = getCurrentPages()
var currentPage = currentPages[currentPages.length - 1]
if (currentPage != null && typeof currentPage.resized === ‘function’) {
currentPage.resized(res.size)
}
})


Media Query

有时,对于不同尺寸的显示区域,页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。
代码示例:
.my-class {
width: 40px;
}

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