横竖屏判断及禁止浏览器滑动条

var $horizontal = $('.horizontal_screen') ;  //可自定义横屏模式提示样式

var $document = $(document) ;

var preventDefault = function(e) {

    e.preventDefault();

};

var touchstart = function(e) {

    $document.on('touchstart touchmove', preventDefault);

};

var touchend = function(e) {

    $document.off('touchstart touchmove', preventDefault);

};



function listener(type){

    if('add' == type){

        //竖屏模式

        $horizontal.addClass('hide');

        $document.off('touchstart', touchstart);

        $document.off('touchend', touchend);          

    }else{

        //横屏模式

        $horizontal.removeClass('hide');

        $document.on('touchstart', touchstart);

        $document.on('touchend', touchend);           

    }

}

function orientationChange(){

    switch(window.orientation) {

        //竖屏模式

        case 0:

        case 180:

            listener('add');

            break;

        //横屏模式

        case -90:

        case 90:

            listener('remove');

            break;

    }

}



$(window).on("onorientationchange" in window ? "orientationchange" : "resize", orientationChange); 



$document.ready(function(){

    //以横屏模式进入界面,提示只支持竖屏

    if(window.orientation == 90 || window.orientation == -90){

        listener('remove');         

    }

});                                        

  

你可能感兴趣的:(浏览器)