css横屏问题的设置

<link rel="stylesheet" media="all and (orientation:portrait)" href="css/index.css">//竖屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="css/landscape.css">//横屏

<style media="all and (orientation:landscape)">
      .hd{
        width:100%;
        height:100px;
        background:yellow;
      }
  </style>

@media only screen and (max-device-width: 1024px) and (orientation:portrait) {  
.landscape { display: none; }  
}  
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {  
.portrait { display: none; }  
}  
  
/* iPads (portrait and landscape) ----------- */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px) {  
/* Styles */  
}  
  
/* iPads (landscape) ----------- */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : landscape) {  
/* Styles */  
}  
  
/* iPads (portrait) ----------- */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : portrait) {  
/* Styles */  
}  

ipad css 控制横竖屏幕：http://blog.csdn.net/myweishanli/article/details/24709363