怎样在手机网页中判断当前是横屏或者竖屏？

Question

现在需要在手机横竖屏的时候显示的网页的布局是不一样的。现行的解决方案是监听window的onresize事件，然后判断当前屏幕的宽高比。但是使用的过程中遇到两个问题：1.如果你弹出输入法进行输入的时候，onresize事件也会触发的，但是这个时候如果处在竖屏下，获取出来的屏幕宽很有可能是比屏幕高要大的，这个时候得出的结果很明显是错误的。2.在UC浏览器下获取的宽高不准确。

Answer 1

监听window的orientationchange事件
javascriptwindow.addEventListener('orientationchange',function(event){
if(window.orientation==180||window.orientation==0){
alert("竖屏");
}
if(window.orientation==90||window.orientation==-90){
alert("横屏");
}
});
                            

Answer 2

可以使用css3的媒体查询来实现
@mediascreenand(orientation:portrait){
/*css[竖向定义样式]*/
......
}
@mediascreenand(orientation:landscape){
/*css[横向定义样式]*/
......
}