[JavaScript] 判斷手機為直向或橫向

Standard

最近在製作手機版的 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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *