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

  }

  });