@media、orientationchange事件、监测微信移动端横竖屏

前段时间接手一个别人的移动端项目，因为没有做横屏样式也没有提示用户关掉手机横屏，每当用户手机开启横屏模式时，会造成页面样式的混乱。

方法一：利用CSS3 @media 媒体检测横竖屏

orientation:portrait 竖屏

orientation:landscape 横屏

.errSreen指横屏时展示的提示页面

.FullScreenPPTWrap指正常显示的内容

基本原理：通过页面可视区宽高比例判断是否发生了横屏，可视区高度大于宽度为竖屏，可视区宽度大于高度为横屏。

注意点：在某些情况下这个方法并不可靠。比如。当我的移动端页面中有需要输入用户信息的input标签时，每次输入信息时手机输入法界面就会占据手机可视区。那么就有一种可能是输入法界面占据太多高度，导致可视区的宽度大于高度。CSS @media就认为此时发生了横屏事件，使页面样式发生变化，本来应该显示的页面却没有显示出来。

不过如果页面只是展示的话，这个方法还是可行的。

@media screen and (orientation:portrait) {
	.errSreen {
		display: none;
	}
	.FullScreenPPTWrap {
		display: block;
	}
}

@media screen and (orientation:landscape) {
	.errScreen {
		display: block;
	}
	.FullScreenPPTWrap {
		display: none;
	}
} 

方法二： 通过window监听orientationchange事件，判断window.orientation属性检测横竖屏

//Android Ios判断
function isAndorid() {
    var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
	return true;
    }
}

window.addEventListener("orientationchange", function() {
	if (window.orientation === 180 || window.orientation === 0) { 
		// Android环境为竖屏
		// Ios环境为横屏
		if(isAndorid()){
			console.log('Android')
		}else{
			console.log('Android')
		}		
	}else if (window.orientation === 90 || window.orientation === -90 ){ 
		// Android环境为横屏           
		// Ios环境为竖屏 

	}
},false);