Hbuilder android 监听横竖屏状态,进行放大缩小

    使用hbuilder做了一个app,有一个功能有一个放大缩小的按钮,如果是竖屏,点击按钮,图形变成全屏,且要隐藏掉状态栏,搜了一下可以使用js的方式监听横竖屏状态,hbuilder api也提供了设置横竖屏的方法,如下:

                //放大缩小按钮full_screen,2018年11月9日11:23:42
    	        $("#full_screen").click(function () {
            	console.log("放大缩小图形按钮");
            	 if (window.orientation === 180 || window.orientation === 0) { 
                      plus.screen.lockOrientation("landscape-primary"); // 把屏幕方向改变成横屏正方向
                 } 
	             if (window.orientation === 90 || window.orientation === -90 ){ 
	                plus.screen.lockOrientation("portrait-primary"); // 把屏幕方向改变成竖屏正方向
	             } 
            }); 

这是监听手机横竖屏,进行样式的设置,其中: 

                   // 设置应用全屏显示！
                  plus.navigator.setFullscreen(true);//可以设置设备全屏显示

//判断手机横竖屏状态：
			window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
	            if (window.orientation === 180 || window.orientation === 0) { 
		          // 设置应用非全屏显示！
                  plus.navigator.setFullscreen(false);
		           console.log("竖屏了")
                  $("#mainCanvas").css("width", '98%');
                  $("#mainCanvas").css("height", '99%');
	            } 
	            if (window.orientation === 90 || window.orientation === -90 ){ 
	               // alert('横屏状态！');
	               console.log("横屏了");
	                // 设置应用全屏显示！
                  plus.navigator.setFullscreen(true);
                  
                  $("#mainCanvas").css("width", '98%');
                  $("#mainCanvas").css("height", '99%');
                  $("#mainCanvas").css("padding-top", '30px');
                  //$("#mainCanvas").css("margin-bottom", '25%');
	            }  
			}, false); 
			//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

css中也提供了,根据设备的横竖屏状态,可以设置不同的css样式,如下:

@media all and (orientation: portrait) {
	.account_layout,.kLineFooter_layout,.kline_top_outerlayout{
		display: block;
	}
	
}
@media all and (orientation: landscape) {
	.account_layout,.kLineFooter_layout,.kline_top_outerlayout{
		display: none;
	}
	
	.ui-page-footer-fixed{
		padding-bottom: 0em !important;
		padding-top: 13px !important;
	}
	
	.timeSpanTable{
		margin-top:40px;
		position:absolute;
        bottom:0px;
	}
	
}