原生iOS應用默認會有這樣的特性,豎屏時顯示狀態欄和導航欄,切換到橫屏時狀態欄隱藏。要想在H5+應用中達到同樣效果,需要:
- 響應橫豎屏切換事件
- 判斷橫豎屏
- 設置狀態欄顯示/隱藏
代碼如下:
//判斷手機橫豎屏狀態:
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);
}
});
需要注意的是:
- orientationchange事件會在設備即將發生橫豎屏切換時引發,因此此時的window.innerWidth和window.innerHeight是旋轉之前的值。
- 建議使用window.innerWidth和window.innerHeight而不是window.outerWidth和window.outerHeight,經測試iOS 9系統無法獲取window.outerWidth和window.outerHeight。
- 不推薦使用window.orientation或screen.orientation來判斷橫豎屏狀態,window.orientation屬性雖然可用但該屬性已經過時(Deprecated),screen.orientation屬性在iOS 9系統中無法獲取(值爲undefined)。