在小程序中实现横竖屏切换的配置方法,实时监听页面宽度

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

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事件处理布局适配

javascript 复制代码
 wx.onWindowResize(function(res){
	console.log(res)	
 })

 // 取消监听窗口尺寸变化事件
 wx.offWindowResize()
相关推荐
互联科技报20 小时前
2026小程序店铺装修模板怎么选?小程序店铺装修教程是什么?
小程序
凡科网小帆20 小时前
右以云小程序:零基础企业的高性价比数字化落地实录
小程序
棋宣21 小时前
微信小程序onShareAppMessage 分享-生命周期函数 在vue3中 组合式函数 hooks中不生效
微信小程序·小程序
2601_9579665321 小时前
抽卡机盲盒小程序怎么做?完整功能搭建与开发要点
小程序
wuyoula2 天前
全新多平台电商代付商城源码
开发语言·c++·ui·小程序·php源码
低代码布道师2 天前
微搭低代码MBA 培训管理系统实战 36——小程序端课程预约功能实现
低代码·小程序
万岳科技系统开发2 天前
小程序直播架构调整指南:H5嵌套模式的优化与替代方案
小程序·架构
Greg_Zhong2 天前
学习AI 工程师第 3 天:小程序中调用豆包模型,实现ai助手(打字机效果与流式输出)
小程序·ai工程师·小程序调用豆包实现ai助手
于先生吖2 天前
家政派单小程序定制厂家
大数据·小程序
00后程序员张2 天前
完整指南 iOS App上架到App Store的步骤详解
macos·ios·小程序·uni-app·objective-c·cocoa·iphone