监听屏幕旋转的事件：onorientationchange

    eg:

    1. function orientationChange(){
    2.     switch(window.orientation){
    3.     case 0:
    4.       alert("竖屏0,screen-width:"+screen.width+";screen-height:"+screen.height);
    5.       break;
    6.     case -90:
    7.       alert("横屏-90,screen-width:"+screen.width+";screen-height:"+screen.height);
    8.       break;
    9.     case 90:
    10.       alert("横屏90,screen-width:"+screen.width+";screen-height:"+screen.height);
    11.       break;
    12.     case 180:
    13.       alert("竖屏180,screen-width:"+screen.width+";screen-height:"+screen.height);
    14.       break;
    15.   }
    17. }

    添加事件监听

    1. addEventListener('load',function(){
    2.   orientationChange();
    4.   window.onorientationchange = orientationChange
    5. })

    横屏样式

    1. @media all and (orientation:landscape) {
    2.     .css{}
    3. }

    竖屏样式

    1. @media all and (orientation:portrait) {
    2.     .css{}
    3. }