首頁  >  文章  >  web前端  >  js判斷橫豎螢幕及禁止瀏覽器滑動條範例_javascript技巧

js判斷橫豎螢幕及禁止瀏覽器滑動條範例_javascript技巧

WBOY
WBOY原創
2016-05-16 16:50:391419瀏覽
複製程式碼 程式碼如下:

var $horizo​​ntal = $('.horizo​​ntal_screen') ;tal_screen') ;tal自訂橫屏模式提示樣式
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){
//垂直螢幕模式
$horizo​​ntal.addClass(' hide');
$document.off('touchstart', touchstart);
$document.off('touchend', touchend);
}else{
//橫屏模式
$horizo​​ntal.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');
}
});

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn