js 监听屏幕转动orientationchange 获取横屏状态window.orientation 监听屏幕旋转完成 苹果手机屏幕多次旋转之后window获取的尺寸不对

监听屏幕转动

// 监听屏幕转动
window.addEventListener('orientationchange',function(){
	// 这个时候屏幕的尺寸数据还没有变化
	var orientation = window.orientation;
    switch(orientation){
        case 90:
        case -90:
            orientation = 'landscape'; //这里是横屏 
            break;
        default:
            orientation = 'portrait';//竖屏
    }
})

获取横屏状态

var orientation = window.orientation;
switch(orientation){
    case 90:
    case -90:
        orientation = 'landscape'; //这里是横屏 
        break;
    default:
        orientation = 'portrait';//竖屏
}

监听屏幕旋转完成

// 监听屏幕旋转完成  获取最新屏幕尺寸
window.addEventListener('resize',function(){

})

苹果手机 多次旋转之后 通过window.innerWidth 和 window.innerHeight获取的尺寸不对

解决方法 设置一个全屏的标签 旋转后获取该标签的 offsetWidth/offsetHeight 用于计算