js判斷橫豎屏及禁止瀏覽器滑動(dòng)條示例

字號(hào):


    代碼如下:
    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(){
    //以橫屏模式進(jìn)入界面,提示只支持豎屏
    if(window.orientation == 90 || window.orientation == -90){
    listener('remove');
    }
    });