使用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;
	}
	
}