十個行動版網頁(Mobile Web)開發輔助工具

Standard

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

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

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

繼續閱讀…

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

Standard

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

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

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

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

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

繼續閱讀…

[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:
繼續閱讀…