uni-app 关闭手机系统竖屏锁定横屏进入app恢复竖屏后样式错乱

uni-app 关闭手机系统竖屏锁定横屏进入app恢复竖屏后样式错乱

测试过的手机

小米12【MIUI14.0.6】
ios【16.7.1】

示例代码

"screenOrientation" : [ "portrait-primary", "landscape-primary" ],

// #ifdef APP-PLUS
plus.screen.unlockOrientation();
plus.screen.lockOrientation('portrait-primary');
// #endif

操作步骤

  • 关闭手机系统竖屏锁定，横屏进入app，恢复成竖屏后，全局样式错乱

预期结果

  • 横屏进入app，恢复成竖屏后

实际结果

  • 关闭手机系统竖屏锁定，横屏进入app，恢复成竖屏后，全局样式错乱

bug描述

manifest.js里设置了"screenOrientation" : [ “portrait-primary”, “landscape-primary” ]，app直接横竖屏。 关闭手机屏幕方向锁定，横屏状态下点击app进入，导致首页（tabBar页面均为nvue）app样式就错乱了。 因为有页面需要手动改变横屏，所以screenOrientation里都需配置，但横屏进入app就会出现样式错乱无法恢复。 哪怕使用跳转空白页面的方法和延时也无法改变，竖屏进入改变屏幕方向时候不会出现这个问题。

必须重新退出app，以竖屏的方向进入才能恢复，不然关闭手机系统的竖屏锁定，横屏进入，怎么弄都是无法恢复了

图片

Image 1
Image 2
Image 3


更多关于uni-app 关闭手机系统竖屏锁定横屏进入app恢复竖屏后样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

看了很多帖子，都说是rpx的问题，都说是nvue页面用rpx就会出现这个问题，但如果你是竖屏手动变横屏，是可以改回来的。 那正常来说，横屏变成竖屏应该也不会有问题，目前这个bug非常的致命啊。。。。希望官方可以修复一下，或者提供一些方法

更多关于uni-app 关闭手机系统竖屏锁定横屏进入app恢复竖屏后样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不用这么麻烦，非常简单
html{
font-size: calc(100vw / 23.5) !important
}

这个方法不太行，那个东西是手机系统自带的默认，没办法通过改变px生效的，他只要是进入后就会以第一次的分辨率去渲染，app是只有我们想让用户看横屏的时候才会横屏，不然都要用户看竖屏，通过首次进入app后判断是什么屏幕，强制锁定后重启就好了plus.runtime.restart();。我的解决方案是这个，我们用的vue和nvue混合开发 // #ifdef APP-PLUS if (plus.navigator.getOrientation()) { plus.screen.lockOrientation(“portrait-primary”); plus.runtime.restart(); } else { plus.screen.lockOrientation(‘portrait-primary’); } // #endif

在 uni-app 中，如果你想在应用启动时强制横屏，并在用户退出应用时恢复竖屏，可能会遇到样式错乱的问题。这是因为强制横屏和恢复竖屏时，页面的布局和样式可能会被重新计算，导致布局错乱。

解决方案

  1. 监听屏幕方向变化： 使用 uni-app 提供的 onWindowResize 或 onDeviceOrientationChange 事件来监听屏幕方向的变化，并根据方向调整页面布局。

    // 在页面中监听屏幕方向变化
onLoad() {
    uni.onWindowResize((res) => {
        const { windowWidth, windowHeight } = res.size;
        if (windowWidth > windowHeight) {
            // 横屏时的处理
            this.adjustLayoutForLandscape();
        } else {
            // 竖屏时的处理
            this.adjustLayoutForPortrait();
        }
    });
}

  2. 动态调整样式： 在屏幕方向变化时，动态调整页面的样式，确保布局正确。

    methods: {
    adjustLayoutForLandscape() {
        // 横屏时的样式调整
        uni.setNavigationBarTitle({
            title: '横屏模式'
        });
        // 其他样式调整
    },
    adjustLayoutForPortrait() {
        // 竖屏时的样式调整
        uni.setNavigationBarTitle({
            title: '竖屏模式'
        });
        // 其他样式调整
    }
}

  3. 强制横屏和恢复竖屏： 使用 plus.screen.lockOrientation 来强制横屏，并在应用退出时恢复竖屏。

    onLoad() {
    // 强制横屏
    if (plus && plus.screen) {
        plus.screen.lockOrientation('landscape-primary');
    }
},
onUnload() {
    // 恢复竖屏
    if (plus && plus.screen) {
        plus.screen.lockOrientation('portrait-primary');
    }
}

  4. 使用 CSS 媒体查询： 在 CSS 中使用媒体查询来适配不同屏幕方向的样式。

    /* 竖屏样式 */
[@media](/user/media) screen and (orientation: portrait) {
    .container {
        flex-direction: column;
    }
}

/* 横屏样式 */
[@media](/user/media) screen and (orientation: landscape) {
    .container {
        flex-direction: row;
    }
}

  5. 使用 Flex 布局： 使用 Flex 布局可以更好地适应不同屏幕方向的变化，减少样式错乱的可能性。

    <view class="container">
    <view class="item">Item 1</view>
    <view class="item">Item 2</view>
</view>

    .container {
    display: flex;
    flex-direction: column;
}

[@media](/user/media) screen and (orientation: landscape) {
    .container {
        flex-direction: row;
    }
}
回到顶部