我从横屏的状态跳转uniapp开发的app,导致全局的字体都变大,竖屏进入是正常,日志打印当前app的状态也是竖屏,好像是rpx造成的,请问有大佬知道如何解决吗

- 发布:2024-12-12 10:35
- 更新:2024-12-27 17:35
- 阅读:233

套马杆的套子 - 没有解决不了的问题,只有解决不完的问题
导致这个问题,是横屏竖屏后的第一个界面样式会乱,
我是这么解决的,
创建一个空白的界面,
然后在横屏想变竖屏前,关闭此界面跳转到空白界面,
onBackPress(e) {
console.log('onBackPress---------》', e);
// 跳转至空白页
uni.redirectTo({
url:'/pages/common/white/white'
})
// 阻止界面返回默认操作, 这一步主要是为了防止界面出现异常,uniapp有对onBackPress的详细讲解
return true;
},
在空白界面增加下面代码
onReady() {
uni.navigateBack()
},

根据楼上的解决方案,完整代码:
这是blank页面的代码:
<template>
<view>
<!-- blank页面用来修复横竖屏切换后,字体变大问题 -->
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
// #ifdef APP-PLUS
plus.screen.lockOrientation("portrait");
// #endif
},
onReady() {
uni.navigateBack({
animationType:'none'
});
},
methods: {
}
}
</script>
<style>
page{
background-color: black;
background-image: url('../../../static/images/page_background.png');
background-size: 100% 200%;
background-repeat: no-repeat;
}
</style>
然后在横屏页面中(即将返回竖屏页面)这样调用:
uni.redirectTo({
url: '/pages/blank/blank/blank'
});

锦鲤丶接单丶 - 锦鲤丶接单丶18560000860丶10+年开发经验
改一下 pages.json 中的 rpxCalcMaxDeviceWidth 就行吧,rpx 最终也会转换成 px, 可计算的最大宽度就是按照这个属性的值计算的。

h***@vip.qq.com - I want to play a game with you.
这种问题小程序也是有的,我这边最终是页面样式重构了rpx全部换成vmin了,小程序不像app这种跳转在回来就正常,小程序是只要是横屏百分百样式变大
b***@163.com (作者)
我这个是从浏览器跳转app,启动页就有这个问题,也可以这样添加吗?
2024-12-12 11:09
planet2
厉害,确实管用!!!!多谢!!
2024-12-27 16:08