(function(){
 var init = function(){
  var updateOrientation = function(){
   var orientation = window.orientation;
   switch(orientation){
    case 90:
    case -90:
     orientation = 'landscape';
     break;
    default:
     orientation = 'portrait';
     break;
   }

   //do something
   //比如在html标签加一个状态
   //然后根据不同状态，显示不同大小
   document.body.parentNode.setAttribute('class',orientation);
  };

  window.addEventListener('orientationchange',updateOrientation,false);
  updateOrientation();
 };

 window.addEventListener('DOMContentLoaded',init,false);
})();

/**竖屏 div边框显示蓝色**/
.portrait body div{
 border:1px solid blue;
}
/**竖屏 div边框显示黄色**/
.landscape body div{
 border:1px solid yellow;
}

@media all and (orientation: portrait) {
 body div {
 border:1px solid blue;
 }
}
@media all and (orientation: landscape) {
 body div {
 border:1px solid yellow;
 }
}

(function(){
 var updateOrientation = function(){
  var orientation = (window.innerWidth > window.innerHeight) "htmlcode">

(function(){
 var supportOrientation = (typeof window.orientation === 'number' &&
   typeof window.onorientationchange === 'object');

 var init = function(){
  var htmlNode = document.body.parentNode,
   orientation;
  var updateOrientation = function(){
   if(supportOrientation){
    orientation = window.orientation;
    switch(orientation){
     case 90:
     case -90:
      orientation = 'landscape';
      break;
     default:
      orientation = 'portrait';
      break;
    }
   }else{
    orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
   }
   htmlNode.setAttribute('class',orientation);
  };

  if(supportOrientation){
   window.addEventListener('orientationchange',updateOrientation,false);
  }else{
   //监听resize事件
   window.addEventListener('resize',updateOrientation,false);
  }

  updateOrientation();
 };

 window.addEventListener('DOMContentLoaded',init,false);
})();




总结
通过orientationchange事件来监听设备是否旋转，配合window.orientation属性判断当前是横屏还是竖屏，以便执行不同的操作。