川歌
川歌
  • 发布:2020-06-19 13:52
  • 更新:2021-11-27 09:21
  • 阅读:2808

【报Bug】横屏后,再竖屏,页面字体变大

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: P40

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

A页面:

uni.navigateTo({  
    url:'/pages/b/index'  
})

B页面:

    onLoad(e) {  
        // 设置横屏  
        plus.screen.lockOrientation('landscape-primary')  
    },  
    onUnload() {  
        // 设置竖屏  
        plus.screen.lockOrientation('portrait-primary')  
    }

再加入C页面或者其它任意页面

uni.navigateTo({  
    url:'/pages/c/index'  
})

C页面整体变大了

预期结果:

页面安实际效果显示

实际结果:

C页面整体变大了

bug描述:

A页面通过uni.navigateTo到B页面,
B页面onLoad的时候设置横屏plus.screen.lockOrientation('landscape-primary'),
B页面onUnload(按返回键)的时候设置竖屏plus.screen.lockOrientation('landscape-primary'),
再加入到其它页面(比如C页面),页面字体变大,整个页面都变大了。

2020-06-19 13:52 负责人:DCloud_UNI_GSQ 分享
已邀请:

最佳回复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

改用px来设置文字大小,r/upx 不支持横竖屏动态切换。

  • 川歌 (作者)

    项目中使用了vant-weapp、uni-ui,App.vue中引入了uni.css

    2020-07-09 17:06

  • s***@gmail.com

    你这种方案不切实际。工作量大就算了,最终的效果还不理想这个是关键,麻烦官方给个好的方案吧,这个Bug很严重呀

    2021-01-21 19:12

  • 1***@qq.com

    为啥是偶发性的

    2021-02-25 16:00

  • 1***@qq.com

    回复 s***@gmail.com: 解决了吗

    2021-02-25 16:01

2***@qq.com

2***@qq.com - 11

我也遇到了,不过我用了一个跳板页D,在C页面跳转的时候设置好竖屏,跳到D页面,然后在D页面的onLoad里跳到你想要的页面,就好了

1***@qq.com

1***@qq.com

2.7.9 的问题, 我版本2.9.8 还没解决,我靠,太操蛋了,一个页面横屏,出来后其他页面全部都放大

  • 川歌 (作者)

    是的,现在还没有解决

    2020-12-07 14:41

  • jantho

    现在还没解决!!!!!!

    2021-04-23 12:31

  • 许士才

    现在还没有解决,不切换页面都会这样

    2021-10-30 18:08

wolfgang

wolfgang

我这也是这样,横屏就无法直视,这个bug出现了快2年了,为什么不给解决啊?hbuilderx是最新版本的还是这样。

  • DCloud_UNI_GSQ

    https://github.com/dcloudio/uni-app/issues/2991

    2021-11-29 15:03

  • randy重名了

    回复 DCloud_UNI_GSQ: 我整个项目都是px作为单位,也会出现这个问题。我出现得比较多的情况是,修改代码,编译横竖排切换,字体就变大。

    2022-01-11 11:13

  • DCloud_UNI_GSQ

    回复 randy重名了: px 是不会的

    2022-01-11 12:16

川歌

川歌 (作者)

来人帮忙看看这个问题,你们有没有遇到过呢??

9***@qq.com

9***@qq.com - 沐寻

我也遇到了,无解。。。

DCloud_UNI_TJX

DCloud_UNI_TJX

注意一下页面是.vue,还是nvue?

tip:nvue 切换横竖屏时可能导致样式出现问题,建议有 nvue 的页面锁定手机方向。

  • 川歌 (作者)

    页面是.vue

    2020-07-08 11:34

DCloud_UNI_TJX

DCloud_UNI_TJX

bug已确认,等待反馈

  • 独角兽

    平板这个横竖屏切换 整体页面变大字体图片都变大 这个问题解决了吗

    2020-11-10 18:33

chenli

chenli

@DCloud_UNI_家兴

hello uni-app线上应用也可复现。

操作流程:Android端开启自动旋转 -〉横屏启动应用 -〉查看实例和我的页面头部的字段都变大的

DCloud_UNI_TJX

DCloud_UNI_TJX

有没有用rpx?现在不支持rpx,文档有说明

  • 川歌 (作者)

    所有页面用的upx,有少量的px,即使页面不写style,页面都会变大

    2020-07-09 14:28

  • DCloud_UNI_TJX

    回复 川歌: 切换了横屏,会根据根字体去计算,App.vue的根字体呢

    2020-07-09 14:46

  • 川歌 (作者)

    回复 DCloud_UNI_TJX: 项目中使用了vant-weapp、uni-ui,App.vue中引入了uni.css

    2020-07-09 17:06

  • 川歌 (作者)

    回复 DCloud_UNI_TJX: 只要横屏后,打开的任意一个页面就会出现这个问题,

    2020-07-09 17:08

9***@qq.com

9***@qq.com - 沐寻

感觉官方是不想解决这个问题了。。。今天更新内容提都没提。。。这是要弃坑的节奏。。。

  • 川歌 (作者)

    他们还没有找到更好的解决方案,不着急,等着

    2020-07-10 09:18

  • DCloud_UNI_GSQ

    说的是r/upx吗?

    2020-07-10 10:53

  • 许士才

    回复 川歌: 现在还不行,2021年了都

    2021-10-30 18:09

睡着就睡着了

睡着就睡着了

我也遇到了同一个问题 ,跳转一个需要横屏的页面,onUnload中再竖屏回来,返回到上一个页面,再重新跳转任意一个页面,字体和页面都会放大,用的upx

j***@126.com

j***@126.com

现在有没有暂时解决简单的骚方法 我加定时器也不太好使

s***@gmail.com

s***@gmail.com - 啦啦啦啦啦啦啦

问题还是没有解决吗?我也遇到了这个问题,如果说全部改成px那工程量大不要说,最终效果不理想是最重要的。麻烦官方给个解决方案吧

技术部一哥

技术部一哥 - 一个热爱前端开发的小菜鸟

麻烦官方给个解决方案

2***@qq.com

2***@qq.com - 辛德瑞拉

我也遇到这个问题了,请问你解决了吗?

h***@lvyii.com

h***@lvyii.com

到现在还没解决啊,挖文帖,项目工程不说开发,光用第三方就很多用了rpx单位,怎么改。。。。。。开发和测试都得重新

  • 川歌 (作者)

    用一个中转页面

    2021-06-08 13:36

3***@qq.com

3***@qq.com

用nvue的,android固定竖屏了,ios固定不了竖屏,麻烦官方给个解决方案

Bondy

Bondy - 。。。

遇到这个bug了。有好的解决方法吗

  • 川歌 (作者)

    跳转一个中转页面

    2021-08-04 09:46

l***@126.com

l***@126.com

我除了遇到这个问题,还遇到了另外一个问题,竖屏-横屏-竖屏后,再进横屏,很大概率出现屏幕已转,但view宽度没有变,还是保持竖屏宽度,因为onresize获取到的windowswidth和windowsheight是横屏的参数,显示只显示竖屏宽度;
效果见下:
正常:

异常:

哪位大神遇到过这个问题?如何解决的?

  • l***@126.com

    反复进出,出现概率是95%

    2021-09-01 00:37

  • 川歌 (作者)

    我之前也遇到了,延时(时间大于300)旋转就可以解决咯半屏的问题;

    2021-09-06 17:51

2***@qq.com

2***@qq.com

我也遇到了,怎么解决呀

2***@qq.com

2***@qq.com

我也遇到了,怎么解决呀

  • 川歌 (作者)

    跳转一个中间页

    2021-10-13 19:50

  • 2***@qq.com

    回复 川歌: 我的是整个app多需要横屏显示,不是单独某一个页面,这个应该没法跳转中间页吧

    2021-10-14 13:48

1***@qq.com

1***@qq.com

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

rpxCalcMaxDeviceWidth 这个改成750 好像就没这个问题了,可以试试

  • s***@126.com

    我都修改成了375,字体的大小布局什么的倒是正常了。但是横屏的时候只有一半的区域可以滑动不知道是怎么回事。

    2021-11-17 21:25

要回复问题请先登录注册