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

151 阅读 0 评论 100 点赞

我是靠谱客的博主追寻衬衫，最近开发中收集的这篇文章主要介绍js判断横竖屏及禁止浏览器滑动条示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

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