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