patw 的筆記、生活、隨筆
手機版網頁
[Node.js] 使用 Node.js 來達成電腦網頁與手機網頁即時互動
五月 3rd
這幾年 Node.js 在台灣許多網站都開始使用，我對這項技術一直頗有興趣，在想能怎麼使用這項技術去玩些有趣的互動。
曾照著網上熱心前輩所寫的文章試著寫寫看，也在去年九月參加了 HTML5與Node.js在台灣聯合技術小聚，但一時案子忙碌，實在沒有心力好好研究便停滯了。
最近公司上線的案子剛好能有這個機會讓我來玩玩，目的是讓使用者透過手機網頁來與電腦開啟的網頁做些即時互動。
用 App 寫要考量跨平台與門檻(還要去下載 App，應該會讓一些單純想玩玩 Event 的使用者卻步)的問題，因此便希望能都用 Web 上的技術來達成囉。
此篇便簡單紀錄一下 Node.js 在 FreeBSD 上的安裝，以及簡單製作一個手機與電腦即時互動的網頁。
自認觀念上還不是相當清楚便迫不及待分享了，若有誤之處還請前輩給予指導囉 ：）
iPhone/iPad 等行動裝置上的 audio 標籤無法自動播放 (autoplay) 與預載 (preload) 的問題
四月 30th
即將上線的 Case 花了不少時間在調校手機網頁與電腦網頁互動的工作，是使用 Nodejs 來達成，但這篇講的主題跟 Nodejs 無關，而是在製作手機版網頁時用到 audio 標籤用以播放音效所遇到的問題。
情況描述：Case 中有個互動效果是當使用者開啟手機版網頁後，會進行互動並播放 GIF 動畫（噢，許多舊版本的 Android 裝置是無法播放 GIF 動畫的，這點也要提一下），動畫播放過程中會播放音效。
在 Android 的內建瀏覽器中可自動播放音效，但在 Android 的 Chrome Beta 與 iPhone/iPad 上的 Safari 卻無法正常播放，一點聲音也沒有。而且在桌上型電腦上都可正常地播放。
為什麼呢？
[JavaScript] 判斷手機為直向或橫向
四月 23rd
最近在製作手機版的 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:
More >
[Android] 好用的 Chrome 瀏覽器之開發人員工具 – USB 網頁偵錯功能
四月 21st
最近在 Android 上終於推出繁體中文的 Chrome 測試版瀏覽器，除了不支援 Flash 外，其他部分個人認為都比內建或其他 Android 網頁瀏覽器來的好用。不過只支援 Android 4.0 。
其中更包含「開發人員工具」，讓開發手機版網頁的人可以方便地在電腦上用 Developer Tools 來針對手機上的網頁進行除錯。本篇文章就來簡單介紹一下使用方法。
[HTML5] 瀏覽器取得定位筆記
八月 18th
某個案子要用手機取得使用者所在經緯度的功能，使用 HTML5 可以很快地達成這個需求，但在較舊的 Android 版本瀏覽器上（例如 HTC Magic 的內建瀏覽器，自行刷機就另當別論了XD）會無法透過 HTML5 的 navigator.geolocation 取得定位。找過資料後，發現在這種情況需要透過 Gears 功能來達成（HTC Magic 的瀏覽器支援 Gears）。
下面就是整合這兩種方法的 Code：
More >
[ASP.NET] 在文字控制項上使用 HTML5 input type 的方法
八月 17th
最近的案件在製作手機版網頁時，其中有讓使用者輸入「手機」的欄位，這時想到若能善用 HTML5 文字框中 type 屬性，將之設為 tel，在智慧型手機上就能自動呼叫出電話數字鍵盤，那麼使用者輸入手機時會方便許多。
但由於是用 ASP.NET 3.5 製作，似乎在 4 之前的版本，文字框控制項尚不支援 HTML5 的眾多 type 屬性，若強制更改會造成編譯錯誤。
網上搜尋了一下解法，果真有相關的討論，其實做法就如同在文字框控制項加上 keydown 屬性一樣，在 code behind 那邊加上即可。
以本例來說，就會像這樣：
More >
近期迴響