開發 iPhone Mobile Web App 一些小技巧

開發 Mobile Web App 有好一陣子,底下來紀錄過去開發的一些經驗以及 iPhone 上面一些 meta 的設定小技巧,適用於 Mobile Web 開發,如果有任何錯誤,請大家可以留言給我,也或者有不錯的建議都可以一起討論。不過此篇文章會比較偏向 iOS iPhone Device 上面的開發技巧。那廢話不多說了,來看看設計 Mobile 需要注意哪些事項。

良好的設計模式

底下是 Web 程式設計師應該注意的事項
  • html 檔案必須宣告 DOCTYPE 型態
    以目前 HTML5 就必須寫成 <!DOCTYPE html>
  • 完全區隔 HTML, CSS, 和 JavaScript 檔案,以便將來好維護或擴充
  • 完整的 html 架構,不要少個單引號或雙引號,或是少寫 close tag

優化 Web Content

為了區分手機跟桌面版本不同的 content,我們可以使用 Media Queries 來區分,在加上 max-device-widthmin-device-width 去偵測整個頁面大小 (screen size)。 舉例來說,偵測 iPhone and iPod touch 裝置,可以透過底下載入 CSS
另外如果是 Desktop 版本可以加入底下
另外或者是直接在 CSS 裡面判斷:
@media screen and (min-device-width: 481px) { ... }
另外針對 screen 或 print 可以直接在 head 裡面寫入

或者在 CSS 裡面寫入
@media screen {
    #text { color: white; background-color: black; }
}

@media print {
    #text { color: black; background-color: white; }
    #nav  { display: none; }
}

Viewport Meta Tag 設定

開發 iPhone 手機版 Web,為了符合 device 真正寬度,必須設定 viewport 的 width 等於 device-width。
另外可以針對使用者可否放大或縮小螢幕,以及是否可以縮放
initial-scale: 畫面初始化倍率 maximum-scale: 畫面最大倍率 minimum-scale: 畫面最小倍率 user-scalable: 用戶是否可以縮放畫面

設定 Web Applications

設定將網頁儲存為 home screen icon 的圖片路徑,預設值為 57×57
定義其他裝置 size 圖片


設定載入頁面時 loading 圖片
隱藏底部 iPhone button bar,看起來更像 iPhone App
更改 status bar 樣式
另外一個重點,當網頁載入完成後,可以隱藏 URL bar
window.onload = function(){
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 100);
}
如果旋轉裝置,則必須在加上 resize event
// jQuery resize event
$(window).resize(function() {
  window.scrollTo(0, 1);
});
如果不想讓使用者滑動網頁,可以加入底下
document.addEventListener("touchmove", function(event){
    event.preventDefault();
}, false);
Reference: Configuring an iPhone Web App With Meta Tags iOS Developer Library
  • 我喜歡這個程式很好用~

  • Joe

    “隱藏底部 iPhone button bar,看起來更像 iPhone App”

    這個似乎是離線模式不是單只有隱藏作用而已

    http://apple.fcld.tw/2012/03/html5ios-app.html#.UQszyErwJUN

    因為我本身有側試過(而且弄了整整一天),把它加入主畫面以後居然沒有辦法更新網頁…