[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:
Continue reading