uniapp横屏竖屏切换，退出首次再进入其它界面，元素样式放大问题解决

止戰️余生

已于 2023-03-03 20:11:02 修改

阅读量2.2k

点赞数 2

分类专栏： uni-app 文章标签： uni-app 前端

于 2023-02-08 13:33:17 首次发布

原文链接：https://www.cnblogs.com/axingya/p/15744361.html

版权

uni-app 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

当从竖屏页面进入横屏，再返回竖屏时，页面样式会变乱。为解决此问题，可以在横屏返回时通过onBackPress监听事件跳转至空白页面，然后再跳转到目标页面，以避免样式错误。在横屏模式下，使用plus.screen.lockOrientation切换方向。

摘要由CSDN通过智能技术生成

问题：从竖屏页面1进入竖屏页面2，再进入横屏，然后返回竖屏页面2，重新回到竖屏页面1，再次进入竖屏页面2，会发现竖屏页面2的所有图片字体都被放大了。再返回竖屏1，再进入竖屏2，一切又恢复正常。

解决：其实就是横竖屏切换之后的第一个加载的页面样式会错乱，所以需要一个空白的页面来承载这个样式错乱的问题。
在横屏页面返回时，监听onBackPress()使其跳转到一个空白的vue页面，这个空白的vue页面在跳转到自己想去的页面。

横屏界面代码：

onLoad(option) {
	// #ifdef APP-PLUS
		plus.screen.unlockOrientation();//解除屏幕方向的锁定，但是不一定是竖屏；
		plus.screen.lockOrientation('landscape-primary');
	// #endif
},
onUnload(){
	// #ifdef APP-PLUS
		plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
	// #endif
},
// 监听页面返回
onBackPress() {
    // 跳转至空白页
	uni.redirectTo({
	    url: 'page/white/white'
    });
    // 阻止界面返回默认操作， 这一步主要是为了防止界面出现异常，uniapp有对onBackPress的详细讲解
    return true;
},

空白页代码：

export default {
    name: 'White',
    data() {
      return {
        
      }
    },
    onLoad() {
      uni.navigateBack()
    },
    methods: {
      
    }
  }