HbuilderX 竖屏切换横屏后，返回点击其他页面，字体变大样式乱的解决方案

齐玉林

已于 2022-02-16 10:01:46 修改

阅读量1.9k

点赞数

分类专栏： html js 文章标签：其他 css css3

于 2022-01-14 23:03:36 首次发布

本文链接：https://blog.csdn.net/qilin001cs/article/details/122503752

版权

html 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

官方给出了2种解决方案

一. 不要使用 upx ,rpx 的单位，该单位需要根据屏幕进行计算，推荐使用em,rem,px 单位

这种方案要修改的代码太多了！实在不想改，下面来看我的方案

1. page/index/page2 页面，onLoad进行横屏并全屏

2. 点击返回按钮执行：myback 方法

3. myback 方法中会解除全屏；并恢复竖屏，同时跳转到一个新页面 /page/index/page3( 最好永远不让人访问的页 )

    onLoad(req) {
		//#ifdef APP-PLUS
		setTimeout(function(){
			plus.navigator.setFullscreen(true);
			plus.screen.lockOrientation("landscape-primary");
		},500);
		//#endif	
	},
	methods: {
		myback(){
            var _this = this;
			if(this.getOs() == 'android'){
				//#ifdef APP-PLUS
				plus.navigator.setFullscreen(false);
				plus.screen.lockOrientation("portrait-primary");
				setTimeout(function(){
					_this.jumpTab('/pages/index/test?b=2')
				},500);
				//#endif	
			}else{
				_this.back();
			}
		},
        getOs(){ 
            if(typeof(plus)!="undefined"){
			    const res = uni.getSystemInfoSync();
			    return res.platform;
		    }else{
			 if(typeof(window)=="undefined"){
				 return "xcx";
			 }else{
				var ua = window.navigator.userAgent.toLowerCase();
				if(ua.match(/MicroMessenger/i) == 'micromessenger'){
					return "weixin";
				}else{
					return "h5";
				} 
			 } 
		   }
        },
        jumpTab:function(path){
		    uni.navigateTo({
			    url:path,
			    animationType:"fade-in"
		    })
	    },
        back:function(){
		    uni.navigateBack({  })
	    }
    }

4. 在/page/index/page3 的 onLoad的方法中执行，回退到2个页面之前的页面，也就是返回页面

        onLoad(req) {
				uni.navigateBack({
					delta:2
				})
        }

这样的话就实现了，在page3页面中样式乱了，系统自动调整到竖屏的upx,rpx字体比例，然后快速的回退到page1页面，再操作跳转到其他的页面，其他页面的样式将不会再乱，或者字体变大的情况

二.固定屏幕方向

固定屏幕方向如何实现页面旋转呢? 对最外层的 <view :style="hengStyle"> 设置一个style

        //#ifdef APP-PLUS
		plus.navigator.setFullscreen(true);
		var conW = plus.screen.width;
		var conH = plus.screen.height;
		console.log("屏幕",conH,conW);
		this.hengStyle = {
			"transform":"rotate(90deg) translate("+((conH-conW)/2)+"rpx,"+((conH-conW)/2)+"rpx)",
			"width":conH+"rpx", 
			"height":conW+"rpx",
			"transform-origin":"center center", 
			"-webkit-transform-origin": "center center"
		}
		//#endif

感谢您的支持，写的文章如对您有所帮助，开源不易，请您打赏，谢谢啦~