H5+應用(MUI)響應橫豎屏切換並設置狀態欄顯示隱藏

原生iOS應用默認會有這樣的特性,豎屏時顯示狀態欄和導航欄,切換到橫屏時狀態欄隱藏。要想在H5+應用中達到同樣效果,需要:

  1. 響應橫豎屏切換事件
  2. 判斷橫豎屏
  3. 設置狀態欄顯示/隱藏

代碼如下:

    //判斷手機橫豎屏狀態:
    window.addEventListener("orientationchange", function ()
	// window.addEventListener('deviceorientation', function(event)
    {
		if (window.innerWidth < window.innerHeight)
		{
			// alert('橫屏狀態!');
			plus.navigator.setFullscreen(true);
		}
		else
		{
			// alert('豎屏狀態!');
			plus.navigator.setFullscreen(false);
		}
    });

需要注意的是:

  1. orientationchange事件會在設備即將發生橫豎屏切換時引發,因此此時的window.innerWidth和window.innerHeight是旋轉之前的值。
  2. 建議使用window.innerWidth和window.innerHeight而不是window.outerWidth和window.outerHeight,經測試iOS 9系統無法獲取window.outerWidth和window.outerHeight。
  3. 不推薦使用window.orientation或screen.orientation來判斷橫豎屏狀態,window.orientation屬性雖然可用但該屬性已經過時(Deprecated),screen.orientation屬性在iOS 9系統中無法獲取(值爲undefined)。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章