从小程序基础库版本 2.4.0 开始，小程序在手机上支持屏幕旋转。具体文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html
在 app.json 的 window 段中设置 "pageOrientation": "auto" ，或在页面 json 文件中配置 "pageOrientation": "auto" 。
以下是在单个页面 json 文件中启用屏幕旋转的示例。
根据系统设置自动旋转
代码示例：
{
"pageOrientation": "auto"
}
如果页面添加了上述声明，则在屏幕旋转时，这个页面将随之旋转，显示区域尺寸也会随着屏幕旋转而变化。
直接固定为横屏显示
{
"pageOrientation": "landscape"
}
pageOrientation参数有：
auto：自动
portrait : 默认（竖屏）
landscape ： 横屏
在 iPad 上启用屏幕旋转支持
从小程序基础库版本 2.3.0 开始，在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是：在 app.json 中添加 "resizable": true。
代码示例：
{
"resizable": true
}
如果小程序添加了上述声明，则在屏幕旋转时，小程序将随之旋转，显示区域尺寸也会随着屏幕旋转而变化。注意：在 iPad 上不能单独配置某个页面是否支持屏幕旋转。
Media Query
有时，对于不同尺寸的显示区域，页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。
代码示例：
.my-class {
width: 40px;
}
@media (min-width: 480px) {
/* 仅在 480px 或更宽的屏幕上生效的样式规则 */
.my-class {
width: 200px;
}
}
屏幕旋转事件
有时，仅仅使用 media query 无法控制一些精细的布局变化。此时可以使用 js 作为辅助。
在 js 中读取页面的显示区域尺寸，可以使用 selectorQuery.selectViewport 。
页面尺寸发生改变的事件，可以使用页面的 onResize 来监听。对于自定义组件，可以使用 resize 生命周期来监听。回调函数中将返回显示区域的尺寸信息。（从基础库版本 2.4.0 开始支持。）
代码示例：
Page({
onResize(res) {
res.size.windowWidth // 新的显示区域宽度
res.size.windowHeight // 新的显示区域高度
}
})
Component({
pageLifetimes: {
resize(res) {
res.size.windowWidth // 新的显示区域宽度
res.size.windowHeight // 新的显示区域高度
}
}
})
此外，还可以使用 wx.onWindowResize 来监听（但这不是推荐的方式）。
Bug & tips:
- Bug： Android 微信版本 6.7.3 中，
live-pusher组件在屏幕旋转时方向异常。
网友评论