十個行動版網頁（Mobile Web）開發輔助工具

近期筆者執行了滿多行動版網頁（Mobile Web），同時也是 RWD 設計的專案。光測不同的瀏覽器（IE 8-11、Chrome、Firefox、Safari）就夠忙了，而行動平台上的各種尺寸、瀏覽器與其他變因更是耗費不少前端工程師的青春…XD

而有時候光用桌面瀏覽器模擬手機瀏覽器，並無法完全真實呈現在行動裝置的情況，所以在開發的過程中使用了許多工具來輔助，在開發期就力求盡量測到（並進而解決）不同裝置的「近似」真實的情況。

以下列出十項，個人覺得還不錯的行動網頁開發輔助工具：

[Node.js] 使用 Node.js 來達成電腦網頁與手機網頁即時互動

這幾年 Node.js 在台灣許多網站都開始使用，我對這項技術一直頗有興趣，在想能怎麼使用這項技術去玩些有趣的互動。

曾照著網上熱心前輩所寫的文章試著寫寫看，也在去年九月參加了 HTML5與Node.js在台灣聯合技術小聚，但一時案子忙碌，實在沒有心力好好研究便停滯了。

最近公司上線的案子（1, 2）剛好能有這個機會讓我來玩玩，目的是讓使用者透過手機網頁來與電腦開啟的網頁做些即時互動。
用 App 寫要考量跨平台與門檻(還要去下載 App，應該會讓一些單純想玩玩 Event 的使用者卻步)的問題，因此便希望能都用 Web 上的技術來達成囉。

此篇便簡單紀錄一下 Node.js 在 FreeBSD 上的安裝，以及簡單製作一個手機與電腦即時互動的網頁。

自認觀念上還不是相當清楚便迫不及待分享了，若有誤之處還請前輩給予指導囉：）

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