js css 判断终端横屏或者竖屏

感觉每年的七八月份都是很忙很忙的季节，烈日炎炎，一个月没有写自己总结了，感觉有点手生，赶紧看一场里约奥运会马拉松压压惊...

• 回主题

随着移动端的发展，开发者难免会遇到客户想到我们觉得奇怪的各种需求，例如手机横屏与竖屏就是一种。

手机横屏与竖屏是基于屏幕旋转功能出现的效果，我观察了办公室的同事，发现大家都会关掉这个功能（我没有偷偷拿同事的手机玩，因为平时开发出来的东西，我自己只有一部手机，所以需要借大家的手机来测试一下）。

举个栗子，如果手机开启屏幕旋转功能的时候，晚上睡觉前我都会看一些公众号技术和鸡汤，一开始是直躺着，隔一阵累了换个姿势侧躺，手机屏幕也跟着转过来了，然后又得把手机竖着抖两下，这样来回看篇文章多累啊，所以我觉得大部分人都会把旋转这个功能默认关掉吧。

所以之前在客户允许的情况下，我们会把横屏的功能关闭掉，一般微场景我们也会关闭。
贴上代码：

/*-----------------------------------------------------------------------*/
/*      html
/*-----------------------------------------------------------------------*/

<div class="dia-none dia-none1">请在竖屏下体验</div>

/*-----------------------------------------------------------------------*/
/*      js
/*-----------------------------------------------------------------------*/
    $(window).bind('orientationchange',function(event){
        var level=false;
        switch(window.orientation){
            case 0:
                break;
            case 90:
                level=true;
                break;
            case -90:
                level=true;
                break;
            case 180:
                break;
            default:
                break;
        }
        $('.dia-none1').css('display',level?'-webkit-box':'none');
    }).trigger('orientationchange');

效果图

但是在客户不允许的情况下，我们只能乖乖的去写适配了。
这里有两个方法判断横屏与竖屏

欢迎补充！

---

一、随着css3的发展我们可以用 @media去控制

@media all and (orientation : landscape) { 

   your code /*横屏*/

} 

@media all and (orientation : portrait){ 

your code /*竖屏*/

} 

二、方向改变事件(orientationchange)

$(window).bind('orientationchange',function(event){
    var level=false;
    switch(window.orientation){
        case 0:
            break;
        case 90:
            level=true;
            break;
        case -90:
            level=true;
            break;
        case 180:
            break;
        default:
            break;
    }
    
    if ( level == true ){
     
      // your code
        
    }else{
        
      // your code

    }
}).trigger('orientationchange');