原生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)。