最近在製作手機版的 Event Site，發現許多眉眉角角的東西要不斷地調校。
iOS 也許還好，頂多就是 iPhone 跟 iPad 的差異。
但 Android 就麻煩多了，要顧及各種版本與螢幕大小。喔對了，還有不同瀏覽器的問題。

本例想利用 JavaScript 來判斷使用者的行動裝置正在使用直向或橫向瀏覽，
若非我們預設的瀏覽方向，需秀出警語或遮罩。

當然也可以選擇 CSS 的方式來製作，可以搜尋 “orientation css” 這樣的關鍵字，可以找到許多做法。
但有時候還是需要 JavaScript 的事件來控制一些流程。

以下是在

• SAMSUNG I9100 (Android 4.0.3): 內建瀏覽器、海豚瀏覽器 8.0.0、Chrome Beta 0.18.4409.2396、Opera Mobile 12.00.ADR-1203051631
• Sony XPERIA S: 內建瀏覽器
• HTC ONE X: 內建瀏覽器
• SonyEricsson Xperia Arc S: 內建瀏覽器
• Apple iPhone 3GS 內建瀏覽器(Safari)
• Apple iPhone 4S 內建瀏覽器(Safari)
• Apple iPad2: 內建瀏覽器(Safari)

測試過 OK。

以下是 Code:

(請先引入 jQuery)

“`javascript
var checkOrientation = function(){

    mode = Math.abs(window.orientation) == 90 ? 'landscape' : 'portrait';

    // 在 Android 上使用 Opera Mobile 測試, 發現要另外這樣判斷
    if ( $.browser.opera )
    {
        width = screen.width;
        height = screen.height;
        mode = width >; height ? "landscape" : "portrait";
    }

    // 本例為希望在使用者用橫向瀏覽時，就秀出遮罩或警示訊息
    if (mode == 'landscape')
    {
       // 警語遮罩 顯示
       $("#mask").show();
    } else {
       // 警語遮罩 關閉
       $("#mask").hide();
    }

};

window.addEventListener(“resize”, checkOrientation, false);
window.addEventListener(“orientationchange”, checkOrientation, false);
setInterval(checkOrientation, 500);
[/code]

參考資料：
http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript