App 横竖屏切换,页面显示错乱
问题描述 App 整体竖屏,一个页面横屏,进入横屏页后,页面上的文字显示有时候显示大,有时候显示小,退出横屏页,竖屏页面文字也会有时候特别大。
复现步骤
pages.json在globalStyle添加竖屏配置- 启用App进入竖屏主页
- 从主页进入详情页,通过
plus.screen.lockOrientation('landScape')控制切换横屏 - 退出详情页,设置
plus.screen.lockOrientation('portrait-primary')控制切换回竖屏 - 此时查看主页部分页面,会出现显示内容被放大的效果,同时详情页的内容显示也会有偶尔特别小的问题
预期结果 横竖屏切换页面正常显示
实际结果 横竖屏切换后,页面经常显示内容过大,或者过小。不一定每次发生,但是发生概率非常大。
下面是网上有人报的问题截图,我的运行结果和它一致。 一张是正常页面显示图,一张是切换横竖屏后异常显示图。

系统信息:
- 发行平台: App
- 操作系统: Android 10
- HBuilderX版本: 2.7.14.20200618
- 设备信息: OPPO Findx
补充信息
推测是横竖屏切换,webview 没有调整宽高,重新渲染页面。
是否使用了rpx或者nvue?
没有使用 nvue,页面大量使用了 rpx
我刚接触 uniapp, 熟悉 Android 开发。 这样的话, 就是使用 rpx 的话,应用中就只能是横屏或者竖屏页面了,我这样理解对吗? 请问我想实现,例如应用中有视频播放页是横屏的,然后其他页面是锁死的竖屏,因为 uniapp 组件库都是基于 rpx ,如果不用 rpx的话,我就无法使用 uniapp UI 组件库了,这样的话,有什么好的建议吗?
我刚接触 uniapp, 熟悉 Android 开发。 这样的话, 就是使用 rpx 的话,应用中就只能是横屏或者竖屏页面了,我这样理解对吗? 请问我想实现,例如应用中有视频播放页是横屏的,然后其他页面是锁死的竖屏,因为 uniapp 组件库都是基于 rpx ,这样的话,有什么好的建议吗?
并没有什么“因为 uniapp 组件库都是基于 rpx”,另外刚贴的文档你看一下啦。
谢谢,用的 uView 组件库是基于 rpx,刚看了官方的 uni-ui 基本上使用的 px
这问题有解决方案吗,进入横屏页面后,回退,再进去另一个竖屏页面,页面都会被放大
我刚接触 uniapp, 熟悉 Android 开发。 这样的话, 就是使用 rpx 的话,应用中就只能是横屏或者竖屏页面了,我这样理解对吗? 请问我想实现,例如应用中有视频播放页是横屏的,然后其他页面是锁死的竖屏,因为 uniapp 组件库都是基于 rpx ,这样的话,有什么好的建议吗?
并没有什么“因为 uniapp 组件库都是基于 rpx”,另外刚贴的文档你看一下啦。
这个有解决办法吗。难道有横竖屏切换就不能用rpx了么
我已经放弃使用 uniapp,转回原生开发了。我开发的应用涉及较多的插件需要自己开发,横竖屏切换。 这两点哪一个都不容易克服,插件开发文档少,调试困难,横竖屏应用不能用 rpx, 需要把我用的 UI 组件里面的 rpx 一个个替换成 px,最终决定放弃使用 uniapp 了。
横屏下用rpx布局也会发生缩小问题,我已经对国产不会有多少期待,一个问题过这么就也不解决,国人都在为房子车子生活奔波,哪来的精力开源。。。
没有使用 nvue,页面大量使用了 rpx
文档已明确说明,rpx不支持动态切换
我也遇到类似的问题,我的想法是,虽然页面使用了rpx,但是我的目的并不是要求同一个页面横竖屏转换后样式正常,而是比如: A(竖屏)跳转到B(横屏) B返回A 的时候A和以前一样正常显示就可以了,但是实际上这个时候A页面样式是错乱的(虽然我倒是可以通过延迟显示解决错乱的问题) 但是一个更严重的问题来了,返回到A后,点击到跳转到其他页面,比如C,这时候C的样式也错乱了;这个就理解不了了,按理来说这个时候已经是竖屏,而且c界面样式也是按照竖屏来设计的,为什么会样式错乱呢。
刚刚找到一个,延迟1点几秒再切换,体验有点差,不过可以解决切换后的问题。 onShow() { // #ifdef APP-PLUS uni.showLoading({ title: "加载中..." }) setTimeout(() => { plus.screen.unlockOrientation(); plus.screen.lockOrientation('landscape-primary'); uni.hideLoading(); }, 1200) //#endif }
我也遇到了这个问题,详情页,点击页面的按钮进入视频video全屏,点击视频左上角返回到详情页,点击详情页后退,再次进入详情页,页面字体表达,格式混乱。
这就是我为什么老是劝退别人不要用uniapp开发app的原因,搞一搞小程序开发什么的还行。uniapp更新了这么多版本,这些陈年旧疾根本没有解决,尤其是在app上涉及到原生的一些组件比如video之类的,在安卓和ios上都会出现各种各样的问题。这是根本无法使用的严重bug,你甚至都不知道怎么去解决。
这个问题解决了:https://blog.csdn.net/xiaoxiangzi520/article/details/149325670?spm=1001.2014.3001.5501