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

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[横向定义样式]*/......}