方法一:用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