查看效果：http://hovertree.com/texiao/js/12/
使用場景
移動端的開發過程中，免不了要判斷橫豎屏，然後在執行其他操作，比如分別加載不同樣式，橫屏顯示某些內容，豎屏顯示其他內容等等。
如何判斷
移動設備提供了兩個對象，一個屬性，一個事件：
window.orientation 屬於window對象上一個屬性；共有三個值 ：0為豎屏模式（portrait）,90為向左反轉變為橫屏模式（landscape），-90為向右反轉變為橫屏模式（landscape），最後180就是設備上下互換還是豎屏模式。
orientationchange 是一個event，在設備旋轉時，會觸發此事件，如同PC上使用的resize事件。
這兩個搭配起來使用，很容易就能獲得設備的橫豎屏狀態
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js檢測移動設備橫豎屏- 何問起</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>
<h2>js檢測移動設備橫豎屏</h2>
請使用移動設備查看效果，請開啟屏幕旋轉。結果如下：
<div id="screenhovertree" style="height:100px;width:320px;border:1px solid silver"></div>
<a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/h/bjae/rg82kt4k.htm">原文</a>
<script>
/*
手機端 初始化判斷橫屏還是豎屏
*/
function orienthovertree() {
if (window.orientation == undefined) { $("#screenhovertree").html("請使用手機查看效果：<br />http://hovertree.com/texiao/js/12/"); };
if (window.orientation == 0 || window.orientation == 180) {
//豎屏
$("#screenhovertree").text("何問起：豎屏");
}
else if (window.orientation == 90 || window.orientation == -90) {
//橫屏
$("#screenhovertree").text("何問起：橫屏");
}
}
/* 在頁面加載的時候調用 */
$(function () {
orienthovertree();
});
/* 在用戶變化屏幕顯示方向的時候調用*/
window.addEventListener("orientationchange", function () {
orienthovertree();
}, false);
</script>
</body>
</html>