川歌
川歌
  • 发布:2020-06-19 13:52
  • 更新:2024-03-14 18:42
  • 阅读:6586

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

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: P40

页面类型: vue

打包方式: 云端

项目创建方式: 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

  • 3***@qq.com

    pages.json 的 globeStyle 里配置 rpx 的如下参数:


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

    rpxCalcMaxDeviceWidth设置为0就好了


    2022-11-06 11:38

  • 3***@qq.com

    在官方网站搜索:rpxCalcMaxDeviceWidth,也有样关文章


    2022-11-06 11:39

  • 5***@qq.com

    回复 3***@qq.com: rpxCalcMaxDeviceWidth设置为0那就代表rpx完全没用了 跟用px一个样了


    2023-01-31 15:13

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

  • 3***@qq.com

    现在还没有解决


    2022-06-01 17: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

DCloud_UNI_GSQ

DCloud_UNI_GSQ

Vue3 支持 rpx 跟随屏幕大小动态变化,后续会同步到 Vue2

川歌

川歌 (作者)

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

9***@qq.com

9***@qq.com - 沐寻

我也遇到了,无解。。。

jxtian

jxtian

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

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

  • 川歌 (作者)

    页面是.vue


    2020-07-08 11:34

jxtian

jxtian

bug已确认,等待反馈

  • 独角兽

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


    2020-11-10 18:33

chenli

chenli

@DCloud_UNI_家兴

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

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

jxtian

jxtian

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

  • 川歌 (作者)

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


    2020-07-09 14:28

  • jxtian

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


    2020-07-09 14:46

  • 川歌 (作者)

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


    2020-07-09 17:06

  • 川歌 (作者)

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


    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

  • 1***@qq.com

    回复 DCloud_UNI_GSQ: 2022年了都,没有解决方案?


    2022-08-15 17:55

  • DCloud_UNI_GSQ

    回复 1***@qq.com: vue3版本已无此问题,后续方案也会同步到vue2版


    2022-08-16 20:48

  • 5***@qq.com

    回复 DCloud_UNI_GSQ: vue3解决了?那为啥我现在3.5.3切换横屏字体还是变大?同样是font-size:10rpx,横屏的会比竖屏大一倍?现在不得不竖屏一个字号,横屏一个字号。。。


    2022-08-21 19:12

  • DCloud_UNI_GSQ

    回复 5***@qq.com: 因为1rpx是屏幕宽度的1/750,屏幕越宽1rpx代表的宽度也越宽


    2022-08-24 14:49

  • 7***@qq.com

    回复 DCloud_UNI_GSQ: 啥时同步


    2022-11-17 15:27

  • h***@163.com

    回复 川歌: 2024年了,还是没有


    2024-03-08 14:07

睡着就睡着了

睡着就睡着了

我也遇到了同一个问题 ,跳转一个需要横屏的页面,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

  • 1***@qq.com

    回复 川歌: 弄了一个空白页,那样如何快速的跳到其他页,会有一个空白页的效果在那


    2022-07-22 10:01

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

我是纸飞机

我是纸飞机

我也遇到了,怎么解决呀

我是纸飞机

我是纸飞机

我也遇到了,怎么解决呀

  • 川歌 (作者)

    跳转一个中间页


    2021-10-13 19:50

  • 我是纸飞机

    回复 川歌: 我的是整个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 好像就没这个问题了,可以试试

  • 苏公子

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


    2021-11-17 21:25

j***@163.com

j***@163.com

22年了,官方赶紧修复吧。

h***@163.com

h***@163.com

2022年10月,还没解决

7***@qq.com

7***@qq.com

解决了吗

1***@qq.com

1***@qq.com

我这个都是自己监听手机变化窗口 然后计算的大小 所有东西都是通过窗口大小来计算的。。。

  • 1***@qq.com

    而且还会报错 。。。 但是一切都是正常的


    2022-11-17 17:01

7***@qq.com

7***@qq.com

延迟1300 毫秒横屏 可解决此问题

1***@qq.com

1***@qq.com

我是横屏返回就直接退出程序了。不然坑太深。

jasonw

jasonw

2023年了,还没解决么?

1***@qq.com

1***@qq.com

2023年了,还没解决么?

4***@qq.com

4***@qq.com

持续关注中,希望官方能快点解决

8***@qq.com

8***@qq.com - 噓噓乖乖

持续关注中,希望官方能快点解决

2***@qq.com

2***@qq.com

马上2024了,官方还没解决呢

b***@sunways-tech.com

b***@sunways-tech.com

2024年了,还没解决

小新的狗叫小白

小新的狗叫小白

开工心累

技术部一哥

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

2025年了 还没解决

码奴是我

码奴是我 - 98it_boys

2026年了 还没解决

要回复问题请先登录注册