uniapp 横屏加载webview 样式错乱

墨之鱼

于 2020-11-27 10:12:17 发布

阅读量1.3k

点赞数 1

分类专栏： uniapp vue

本文链接：https://blog.youkuaiyun.com/qq_27007423/article/details/110222448

版权

uniapp 同时被 2 个专栏收录

11 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

当使用uniapp进行开发时，遇到在onLaunch中锁定横屏，由于屏幕切换的延迟，导致webview在竖屏模式下加载样式，从而产生混乱。为解决此问题，可以采用setTimeout函数，延迟300毫秒再加载webview，确保在横屏状态下加载，以保证样式正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因是onLaunch锁定横屏的时候有一定延迟，这时候还没完全切换为横屏的时候就已经加载webview，所以webview 是按竖屏的时候加载样式。

    onLaunch: function() {
        console.log('App Launch');
        plus.screen.lockOrientation("landscape-primary"); // 锁定横屏
        // 设置全屏
        plus.navigator.setFullscreen(true);
        // plus.screen.lockOrientation('portrait'); 
        
        // let sysObj = uni.getSystemInfoSync();
        // let windowWidth = sysObj.windowWidth
        // let windowHeight = sysObj.windowHeight
        // console.log(windowWidth)
        // console.log(windowHeight)
        // 853 480 转屏后
        // 默认（竖屏） 480 853
    },