在小程序中实现横竖屏切换的配置方法,实时监听页面宽度
2026/7/31 3:25:06 网站建设 项目流程

在小程序中实现横竖屏切换的配置方法:

1. 全局配置

在app.json中添加:
{
“resizable”: true,
“pageOrientation”: “auto”
}

2.页面级配置

在对应页面的.json文件中设置:
{
“pageOrientation”: “landscape” // 强制横屏
// 或 “portrait” 强制竖屏
// 或 “auto” 跟随手机自动 横屏/竖屏
}

参数说明:

resizable:开启屏幕旋转支持(基础库2.4.0+)
pageOrientation:控制显示方向(auto/自适应,landscape/横屏,portrait/竖屏)

注意事项:

1 需在代码中监听onResize事件处理布局适配
2 横屏模式下需自行处理导航栏适配问题
3 部分安卓设备需开启系统自动旋转功能

参考文档:
框架/小程序配置
视图层/响应显示区域变化

3. 监听onWindowResize事件处理布局适配

wx.onWindowResize(function(res){console.log(res)})// 取消监听窗口尺寸变化事件wx.offWindowResize()

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询