可以使用css3 的媒体查询来实现

@media screen and (orientation:portrait) {
    /*  css[竖向定义样式]  */
    ......
}

@media screen and (orientation:landscape) {
    /*   css[横向定义样式]  */
    ......

}

监听 window 的 orientationchange 事件

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

var utilResize = {
        init : function() {
            var ua = navigator.userAgent.toLowerCase();
            this.isIos = (/(iphone|ipad|ipod)/i).test(ua);

            this.canUseNativeFullApi = (/(qqbrowser|ucbrowser|micromessenger)/i).test(ua);
            this.isModenBrowser = this.isIos | this.canUseNativeFullApi;//高级浏览器横竖屏监听重力感应事件
        }
        addOrientationListener : function() {
            var self = this;

            if (this.isModenBrowser) {console.log('use orientationchange');
                window.addEventListener('orientationchange', function(){
                    self._orientationChangeHandler();
                });
            } else {console.log('use resize event');
                $(window).resize(function() {
                    self._orientationChangeHandler();
                });
            }
        },
        _orientationChangeHandler : function() {
            var self = this;
            setTimeout(function() {
                if ( window.orientation == 180 || window.orientation== 0 ) {
                    onsole.log('竖屏');////
                } else if( window.orientation == 90 || window.orientation == -90 ) {//横屏
                    
                }
                
            }, 300);
        }
}

这是我最后的解决方案