微信小程序如何实现折叠屏兼容?有妙招吗?

2026-04-27 22:0010阅读0评论建站教程
  • 内容介绍
  • 文章标签
  • 相关推荐
微信小程序 折叠屏兼容

恳请大家... 最近维护了将近一年的微信小程序, 突然提出要兼容折叠屏,这款小程序主要功能一些图表汇总展示,也就是专门给一些领导用的,也不知道为啥领导们为啥突然喜欢用折叠屏手机了一句话需求,苦的还是咱们程序员,但没办法,谁让甲方是爸爸呢,硬着头皮改吧,好在再说说解决了主要原因是是甲方内部使用的小程序,这里不便贴图,但有官方案例图片,以供参考

具体实现

1.配置 的 globeStyle

 { "globalStyle": { "rpxCalcMaxDeviceWidth": 1200, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960 "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375 "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750 }, }

!

还好issues 区一位大神有解决办法 感兴趣的老铁可以去瞅瞅

内容缩放拉伸的处理

这一段中提出了两个策略

响应显示区域变化

{ "globalStyle": { "rpxCalcMaxDeviceWidth": 1200, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960 "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度, 换言之... 设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375 "rpxCalcIncludeWidth":

阅读全文
微信小程序 折叠屏兼容

恳请大家... 最近维护了将近一年的微信小程序, 突然提出要兼容折叠屏,这款小程序主要功能一些图表汇总展示,也就是专门给一些领导用的,也不知道为啥领导们为啥突然喜欢用折叠屏手机了一句话需求,苦的还是咱们程序员,但没办法,谁让甲方是爸爸呢,硬着头皮改吧,好在再说说解决了主要原因是是甲方内部使用的小程序,这里不便贴图,但有官方案例图片,以供参考

具体实现

1.配置 的 globeStyle

 { "globalStyle": { "rpxCalcMaxDeviceWidth": 1200, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960 "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375 "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750 }, }

!

还好issues 区一位大神有解决办法 感兴趣的老铁可以去瞅瞅

内容缩放拉伸的处理

这一段中提出了两个策略

响应显示区域变化

{ "globalStyle": { "rpxCalcMaxDeviceWidth": 1200, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960 "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度, 换言之... 设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375 "rpxCalcIncludeWidth":

阅读全文