方法一：用resize事件来判断，利用屏幕的宽高比，来判断横竖屏 （兼容性较好）
(function () { var updateOrientation = function () { var orientation = (window.innerWidth > window.innerHeight)? ‘landscape‘ : ‘portrait‘; if(orientation === ‘landscape‘){ //横屏 } else if(orientation === ‘portrait‘){ //竖屏 } } var init = function () { updateOrientation(); window.addEventListener(‘resize‘,updateOrientation,false); } window.addEventListener(‘DOMContentLoaded‘,init,false) })()
方法二：css3媒体查询
@media all and ( orientation: portrait ){ //竖屏 } @media all and ( orientation: landscape ){ //横屏 }
方法三：orientationChange事件 （我在谷歌测试的，弹出来undefined,这个不建议用，兼容性不好）
window.addEventListener("orientationchange", function() {
alert(window.orientation);
}, false);
终结：需要操作js的用方法一，只需要改改样式的用方法二
原文：http://www.cnblogs.com/wanghao1991/p/6364292.html