根据设备方向不同加载不同样式

一、CSS3所提供的新功能，操作起来方便快捷，唯一的不足就在于其兼容性不是很好，毕竟古老的浏览器都不兼容。
二、使用window中的orientation属性以及方法，进行设备是否旋转的控制。相比之下，第二种方法比第一种的兼容要好一些，但是有限。三、兼容性比较好，但是，性能却不是很好——利用计时器配合功能的实现，每隔一段时间检测一下当前屏幕的宽度和高度，并进行比较。

第一种：CSS3媒体查询

<style type="text/css"> 
@media all and (orientation : landscape) { 
/*水平方向*/
body { 
background: #f00; 
} 
} 
@media all and (orientation : portrait){ 
/*垂直方向*/
body { 
background: #0f0; 
} 
} 
</style>

第二种：利用 window.orientation属性与onorientationchange事件。window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式。

function updateOri(){
　　var orientation=window.orientation;
　　if(orientation == 90 || orientation == -90) {
　　//水平方向
　　　　orientation="landscape"; 
　　} else {
　　//垂直方向
　　　　orientation="portrait";
　　}
　　document.body.className = orientation; // 注意，此处直接为body设置了类名（需要与前面的结构样式配合）
}
window.addEventListener("orientationchange", updateOri, false);

第三种方法： innerHeight —— 使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。

function updateOri(){

　　var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait"; 
　　document.body.className = orientation; 

}

setInterval(updateOri, 5000);