uni-app横屏跳转app导致全局字体都变大

uni-app横屏跳转app导致全局字体都变大

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

图片

图片


更多关于uni-app横屏跳转app导致全局字体都变大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

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

更多关于uni-app横屏跳转app导致全局字体都变大的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我这个是从浏览器跳转app，启动页就有这个问题，也可以这样添加吗？

厉害，确实管用！！！！多谢！！

根据楼上的解决方案，完整代码： 这是blank页面的代码： <template>
<view>

</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’
});

这个其实应该官方弄的啊，是没监听到横屏转竖屏吗？没有重新设置根字体大小吧

改一下 pages.json 中的 rpxCalcMaxDeviceWidth 就行吧，rpx 最终也会转换成 px, 可计算的最大宽度就是按照这个属性的值计算的。

这种问题小程序也是有的，我这边最终是页面样式重构了rpx全部换成vmin了，小程序不像app这种跳转在回来就正常，小程序是只要是横屏百分百样式变大

在uni-app开发中，遇到横屏跳转导致全局字体变大的问题，通常是因为横屏和竖屏的适配没有处理好。这可能是因为CSS的媒体查询（media queries）或者页面的布局样式在横屏模式下没有正确设置。以下是一些可能帮助解决问题的代码示例和思路。

1. 使用媒体查询确保横屏和竖屏样式一致

首先，确保在CSS中使用了媒体查询来定义横屏和竖屏的样式。这可以确保在不同屏幕方向下，字体大小和其他样式保持一致。

/* 竖屏样式 */
@media screen and (orientation: portrait) {
    body {
        font-size: 16px; /* 或者其他你希望的字体大小 */
    }
}

/* 横屏样式 */
@media screen and (orientation: landscape) {
    body {
        font-size: 16px; /* 确保横屏时字体大小与竖屏一致 */
    }
}

2. 检查页面的布局样式

如果全局字体变大，可能是因为页面的宽度或高度变化导致布局错乱。确保页面的布局样式在不同屏幕方向下都能正确适应。

/* 示例：确保容器宽度和高度在不同方向下都能正确显示 */
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

3. 在JavaScript中监听屏幕方向变化

可以通过JavaScript监听屏幕方向的变化，并动态调整字体大小或其他样式。

// 监听屏幕方向变化
window.addEventListener('resize', function() {
    if (window.innerWidth > window.innerHeight) {
        // 横屏模式
        document.body.style.fontSize = '16px'; // 设置横屏时的字体大小
    } else {
        // 竖屏模式
        document.body.style.fontSize = '16px'; // 确保竖屏时字体大小与横屏一致
    }
});

// 初始化时设置字体大小
window.dispatchEvent(new Event('resize'));

4. 检查uni-app的配置

确保uni-app的manifest.json中配置了正确的屏幕方向支持。

"app-plus": {
    "distribute": {
        "apple": {
            "supports": [
                "orientation-portrait",
                "orientation-landscape"
            ]
        }
    }
}

以上代码示例和思路应该能帮助你解决uni-app横屏跳转导致全局字体变大的问题。如果问题仍然存在，建议进一步检查页面的具体样式和布局，或者考虑是否有其他CSS或JavaScript代码影响了字体大小。

回到顶部