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

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');         
    }
});                                        

  

posted @ 2014-04-25 14:35  hitbs228  阅读(410)  评论(0编辑  收藏  举报