小程序
小游戏
企业微信
微信支付
扫描小程序码分享
我做的是聊天类小程序,今天测试提出横屏出现问题,横屏后布局字体都改变了
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
单位全部换成vmin就可以了。横竖屏都可以正常显示。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
手机平板默认竖屏,平板横屏会提示竖屏使用(除非平板锁定了横屏,进入小程序就是横屏,这个解决办法只能是按px写一套样式了)
可以看看响应显示区域变化
显示区域尺寸显示区域指小程序界面中可以自由布局展示的区域。在默认情况下,小程序显示区域的尺寸自页面初始化起就不会发生变化。但以下两种方式都可以改变这一默认行为。在手机上启用屏幕旋转支持从小程序基础库版本 2.4.0 开始,小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是:在 app.json 的 window 段中设置 "pageOrientation": "auto" ,或在页面 json 文件中配置 "pageOrientation": "auto" 。从小程序基础库版本 2.5.0 开始, pageOrientation 还可以被设置为 landscape ,表示固定为横屏显示。在 iPad 上启用屏幕旋转支持从小程序基础库版本 2.3.0 开始,在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是:在 app.json 中添加 "resizable": true 。如果小程序添加了上述声明,则在屏幕旋转时,小程序将随之旋转,显示区域尺寸也会随着屏幕旋转而变化。注意:在 iPad 上不能单独配置某个页面是否支持屏幕旋转。
显示区域尺寸
显示区域指小程序界面中可以自由布局展示的区域。在默认情况下,小程序显示区域的尺寸自页面初始化起就不会发生变化。但以下两种方式都可以改变这一默认行为。
在手机上启用屏幕旋转支持
从小程序基础库版本 2.4.0 开始,小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是:在 app.json 的 window 段中设置 "pageOrientation": "auto" ,或在页面 json 文件中配置 "pageOrientation": "auto" 。
app.json
window
"pageOrientation": "auto"
从小程序基础库版本 2.5.0 开始, pageOrientation 还可以被设置为 landscape ,表示固定为横屏显示。
pageOrientation
landscape
在 iPad 上启用屏幕旋转支持
从小程序基础库版本 2.3.0 开始,在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是:在 app.json 中添加 "resizable": true 。
"resizable": true
如果小程序添加了上述声明,则在屏幕旋转时,小程序将随之旋转,显示区域尺寸也会随着屏幕旋转而变化。注意:在 iPad 上不能单独配置某个页面是否支持屏幕旋转。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
单位全部换成vmin就可以了。横竖屏都可以正常显示。
手机平板默认竖屏,平板横屏会提示竖屏使用(除非平板锁定了横屏,进入小程序就是横屏,这个解决办法只能是按px写一套样式了)
可以看看响应显示区域变化
对于平板我只能说还是推荐为平板单独写一套 px 的样式(平板锁定横屏状态打开小程序就是横屏,再切竖屏反而提示旋转为横屏使用)单独写平板样式是最好的。
参考文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html