uni-app icon indicating copy to clipboard operation
uni-app copied to clipboard

App 横竖屏切换,页面显示错乱

Open StarHosea opened this issue 5 years ago • 15 comments

问题描述 App 整体竖屏,一个页面横屏,进入横屏页后,页面上的文字显示有时候显示大,有时候显示小,退出横屏页,竖屏页面文字也会有时候特别大。

复现步骤

  1. pages.jsonglobalStyle 添加竖屏配置
  2. 启用App进入竖屏主页
  3. 从主页进入详情页,通过 plus.screen.lockOrientation('landScape') 控制切换横屏
  4. 退出详情页,设置 plus.screen.lockOrientation('portrait-primary') 控制切换回竖屏
  5. 此时查看主页部分页面,会出现显示内容被放大的效果,同时详情页的内容显示也会有偶尔特别小的问题

预期结果 横竖屏切换页面正常显示

实际结果 横竖屏切换后,页面经常显示内容过大,或者过小。不一定每次发生,但是发生概率非常大。

下面是网上有人报的问题截图,我的运行结果和它一致。 一张是正常页面显示图,一张是切换横竖屏后异常显示图。

0 0 (1)

系统信息:

  • 发行平台: App
  • 操作系统: Android 10
  • HBuilderX版本: 2.7.14.20200618
  • 设备信息: OPPO Findx

补充信息

推测是横竖屏切换,webview 没有调整宽高,重新渲染页面。

StarHosea avatar Jul 08 '20 01:07 StarHosea

是否使用了rpx或者nvue?

zhetengbiji avatar Jul 08 '20 02:07 zhetengbiji

没有使用 nvue,页面大量使用了 rpx

StarHosea avatar Jul 08 '20 02:07 StarHosea

没有使用 nvue,页面大量使用了 rpx

文档已明确说明,rpx不支持动态切换

zhetengbiji avatar Jul 08 '20 02:07 zhetengbiji

我刚接触 uniapp, 熟悉 Android 开发。 这样的话, 就是使用 rpx 的话,应用中就只能是横屏或者竖屏页面了,我这样理解对吗? 请问我想实现,例如应用中有视频播放页是横屏的,然后其他页面是锁死的竖屏,因为 uniapp 组件库都是基于 rpx ,如果不用 rpx的话,我就无法使用 uniapp UI 组件库了,这样的话,有什么好的建议吗?

StarHosea avatar Jul 08 '20 02:07 StarHosea

我刚接触 uniapp, 熟悉 Android 开发。 这样的话, 就是使用 rpx 的话,应用中就只能是横屏或者竖屏页面了,我这样理解对吗? 请问我想实现,例如应用中有视频播放页是横屏的,然后其他页面是锁死的竖屏,因为 uniapp 组件库都是基于 rpx ,这样的话,有什么好的建议吗?

并没有什么“因为 uniapp 组件库都是基于 rpx”,另外刚贴的文档你看一下啦。

zhetengbiji avatar Jul 08 '20 02:07 zhetengbiji

谢谢,用的 uView 组件库是基于 rpx,刚看了官方的 uni-ui 基本上使用的 px

StarHosea avatar Jul 08 '20 03:07 StarHosea

这问题有解决方案吗,进入横屏页面后,回退,再进去另一个竖屏页面,页面都会被放大

cathy-hh avatar Nov 05 '20 09:11 cathy-hh

我刚接触 uniapp, 熟悉 Android 开发。 这样的话, 就是使用 rpx 的话,应用中就只能是横屏或者竖屏页面了,我这样理解对吗? 请问我想实现,例如应用中有视频播放页是横屏的,然后其他页面是锁死的竖屏,因为 uniapp 组件库都是基于 rpx ,这样的话,有什么好的建议吗?

并没有什么“因为 uniapp 组件库都是基于 rpx”,另外刚贴的文档你看一下啦。

这个有解决办法吗。难道有横竖屏切换就不能用rpx了么

liuliuabc avatar Nov 20 '20 14:11 liuliuabc

我已经放弃使用 uniapp,转回原生开发了。我开发的应用涉及较多的插件需要自己开发,横竖屏切换。 这两点哪一个都不容易克服,插件开发文档少,调试困难,横竖屏应用不能用 rpx, 需要把我用的 UI 组件里面的 rpx 一个个替换成 px,最终决定放弃使用 uniapp 了。

StarHosea avatar Nov 25 '20 07:11 StarHosea

横屏下用rpx布局也会发生缩小问题,我已经对国产不会有多少期待,一个问题过这么就也不解决,国人都在为房子车子生活奔波,哪来的精力开源。。。

pettyAlways avatar Jan 18 '21 07:01 pettyAlways

没有使用 nvue,页面大量使用了 rpx

文档已明确说明,rpx不支持动态切换

我也遇到类似的问题,我的想法是,虽然页面使用了rpx,但是我的目的并不是要求同一个页面横竖屏转换后样式正常,而是比如: A(竖屏)跳转到B(横屏) B返回A 的时候A和以前一样正常显示就可以了,但是实际上这个时候A页面样式是错乱的(虽然我倒是可以通过延迟显示解决错乱的问题) 但是一个更严重的问题来了,返回到A后,点击到跳转到其他页面,比如C,这时候C的样式也错乱了;这个就理解不了了,按理来说这个时候已经是竖屏,而且c界面样式也是按照竖屏来设计的,为什么会样式错乱呢。

enilu avatar May 17 '21 02:05 enilu

刚刚找到一个,延迟1点几秒再切换,体验有点差,不过可以解决切换后的问题。 onShow() { // #ifdef APP-PLUS uni.showLoading({ title: "加载中..." }) setTimeout(() => { plus.screen.unlockOrientation(); plus.screen.lockOrientation('landscape-primary'); uni.hideLoading(); }, 1200) //#endif }

GitChenM avatar Jul 29 '21 03:07 GitChenM

我也遇到了这个问题,详情页,点击页面的按钮进入视频video全屏,点击视频左上角返回到详情页,点击详情页后退,再次进入详情页,页面字体表达,格式混乱。

Image

yangfeng005 avatar Jul 12 '25 09:07 yangfeng005

这就是我为什么老是劝退别人不要用uniapp开发app的原因,搞一搞小程序开发什么的还行。uniapp更新了这么多版本,这些陈年旧疾根本没有解决,尤其是在app上涉及到原生的一些组件比如video之类的,在安卓和ios上都会出现各种各样的问题。这是根本无法使用的严重bug,你甚至都不知道怎么去解决。

sgshy1995 avatar Jul 23 '25 09:07 sgshy1995

这个问题解决了:https://blog.csdn.net/xiaoxiangzi520/article/details/149325670?spm=1001.2014.3001.5501

yangfeng005 avatar Jul 31 '25 07:07 yangfeng005