Js judge horizontal portrait and disable browser slider example

  • 2020-03-30 02:47:26
  • OfStack

 
var $horizontal = $('.horizontal_screen') ; //You can customize the landscape mode prompt style
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){ 
//Vertical screen mode
$horizontal.addClass('hide'); 
$document.off('touchstart', touchstart); 
$document.off('touchend', touchend); 
}else{ 
//Landscape mode
$horizontal.removeClass('hide'); 
$document.on('touchstart', touchstart); 
$document.on('touchend', touchend); 
} 
} 
function orientationChange(){ 
switch(window.orientation) { 
//Vertical screen mode
case 0: 
case 180: 
listener('add'); 
break; 
//Landscape mode
case -90: 
case 90: 
listener('remove'); 
break; 
} 
} 

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

$document.ready(function(){ 
//Enter the interface in landscape mode. Only portrait is supported
if(window.orientation == 90 || window.orientation == -90){ 
listener('remove'); 
} 
}); 

Related articles: