说明:

  1. 如果横竖屏切换只是替换样式, 请用第4种,
  2. 如果横竖屏切换, 需要执行某些方法,最简单粗暴的就使用 第5种方式。【小米4c,微信浏览器,小米浏览器,360浏览器亲测没有问题】

温馨提示:
1、如果移动端所有浏览器都失效,请检查手机屏幕旋转是否开启;
2、如果只有微信旋转失效,而在浏览器中打开正常,请打开微信的【开启横屏模式】;
3、如果以上两条都无法解决,请检查人品。

移动端判断横竖屏切换,主要的五种方式

1. 浏览器自带事件 orientationchange

    var updateOrientation = function() {
    var orientation = window.orientation;
    switch(orientation) {
      case 90: case -90:
        orientation = 'landscape';
      break;
      default:
        orientation = 'portrait';
    }
    // set the class on the HTML element (i.e. )
    document.body.parentNode.setAttribute('class', orientation);
    };
    // event triggered every 90 degrees of rotation
    window.addEventListener('orientationchange', updateOrientation, false);

2. CSS样式的

    @media all and (orientation: portrait) {
    body div { width: 10%; }
    }
    @media all and (orientation: landscape) {
    body div { width: 15%; }
    }

3. 定时器判断页面宽高

    var updateOrientation = function() {
         // landscape when width is biggest, otherwise portrait
         var orientation = (window.innerWidth > window.innerHeight) ? 'landscape': 'portrait';
         // set the class on the HTML element (i.e. )
         document.body.parentNode.setAttribute('class', orientation);
     };
     // initialize the orientation
     updateOrientation();
     // update every 5 seconds
     setInterval(updateOrientation, 5000);

4. 方法1 和 2 两种的结合, 因为1 存在兼容性问题,比如微信浏览器不触发, 那么就可以用定时器,判断CSS。

    (function(){
     var supportsOrientation = (typeof window.orientation == 'number' && typeof window.onorientationchange == 'object');
     var HTMLNode = document.body.parentNode;
     var updateOrientation = function() {
       // rewrite the function depending on what's supported
       if(supportsOrientation) {
         updateOrientation = function() {
           var orientation = window.orientation;
           switch(orientation) {
             case 90: case -90:
               orientation = 'landscape';
             break;
             default:
               orientation = 'portrait';
           }
           // set the class on the HTML element (i.e. )
           HTMLNode.setAttribute('class', orientation);
         }
       } else {
         updateOrientation = function() {
           // landscape when width is biggest, otherwise portrait
           var orientation = (window.innerWidth > window.innerHeight) ? 'landscape': 'portrait';
           // set the class on the HTML element (i.e. )
           HTMLNode.setAttribute('class', orientation);
         }
       }
       updateOrientation();
     }
     var init = function() {
       // initialize the orientation
       updateOrientation();
       if(supportsOrientation) {
         window.addEventListener('orientationchange', updateOrientation, false);
       } else {
         // fallback: update every 5 seconds
         setInterval(updateOrientation, 5000);
       }
     }
     window.addEventListener('DOMContentLoaded', init, false);
    })();

5. 最简单粗暴的 onresize 事件【注意,不能加载 document 或者 body 上】,**必须加在 window对象上** ,因为 body 和 document 的大小可能因为HTML内容而变化, 这样会造成不必要的触发。

    $(window).on('resize', function () {
    fn_onResize();
    })

参考文章

  1. 微信横屏问题
你可能感兴趣的内容
0条评论
AL

Alex-Miller

这家伙太懒了,什么都没留下
Owner