寫作 Mobile Web App 的準備

凡事總有開始,就從這篇開始寫吧!

頁面基本架構

既然要用 HTML5 來寫 Mobile Web App,那一個頁面的基本結構就該像是這樣:

[code lang="xml"]



標題




[/code]

在 HTML5 的規格書中,一個標準的 HTML5 文件,應該要以 開頭,比起 HTML4.01 來說簡化了不少。而指定頁面編碼的語法,也縮減成 。至於其它的部份,雖然 HTML5 修改了許多標籤的用法,不過基本的架構還是與一般的 HTML 文件相去不遠。不過,因為這是使用 HTML5 而不是 XHTML,所以原本要特別作結尾的標籤,現在不必刻意加上 / 作結尾了,例如換行用的標籤寫作
就可以了,而不必

瀏覽器的 viewport 問題

由於行動裝置上解析度較小的關係,瀏覽器提供了縮放 viewport 的技術。簡單地說,原本 640px*800px 的網頁,若要在 320px * 480px (iPhone 3Gs 的解析度)的瀏覽器上顯示網頁的全景,那勢必要將原本的網頁畫面縮放 1/2(符合寬度),這時瀏覽器的 viewport 就是 0.5。而使用者若是覺得畫面太小而將畫面放大,假設將原本 160px*400px 的區塊放大至符合 320px 的寬,那此時的 viewport 就變成 2.0 了。

如果你的 Mobile WebApp 希望鎖定 viewport 的話,在 iPhone/Android 手機上的瀏覽器有提供了一個可以在 meta 標籤裡設定 viewport 的設定,可以讓開發者決定預設為手機螢幕的寬度,設定的方式如下:

[code lang="xml"][/code]

width 屬性定義 viewport 1.0x 的寬度,這裡設定成 device-width 表示依行動裝置的螢幕寬度而定;initial-scale 則表示預設的畫面是以多少倍的 viewport 來顯示;maximum-scale 定義了這個頁面能縮放的最高倍率;而 user-scalable 的值為 01,用來表示使用者是否能自行調整畫面的 viewport 倍率。

上述的設定,會將畫面鎖定在 viewport 在 1.0,而且不允許使用者調整 viewport 大小。這樣一來,當開發者在設計頁面時,就可以固定於 320px (iPhone 3Gs) 或 480px (Android WVGA) 的寬度來設計了。由於目前的 iPhone/Android 手機都支援螢幕翻轉的功能,如果沒有利用上述的設定將 viewport 鎖定在 1.0x,在使用者以 portrait 模式(以 iPhone 3Gs 為例:320px*480px)打開頁面時,viewport 1.0 就會以 320px-wide 為基準,當使用者翻轉手機成 landscape 模式(以 iPhone 3Gs 為例:480px*320px)時,所得到的 viewport 就變成 1.5x,於是原本在 portrait 模式下 10px*10px 的圖片,當瀏覽器轉為 landscape 模式時,該圖就會被放大為 15px*15px 來顯示(即便圖片還是 10px*10px),這在設計畫面上是要注意的小地方。

iPhone 的 Mobile WebApp 圖示

當 iPhone 使用者在瀏覽 Web 時,可以利用瀏覽器上的 + 按鈕後,選擇「加入主畫面螢幕」(Add to Home Screen)將該頁加入桌面(Home Screen)中成為一個書籤圖示,這樣下次以該圖示啟動該 Mobile WebApp 時就不會出現瀏覽器的工具列(獲得更大的可視區域)。在原本的設計中,圖示選擇使用頁面的縮圖,如果你想要讓 iPhone 使用你自己設計的圖示,那就準備一張 57px*57px 的圖片,然後在頁面中加入下列的 link 標籤:

[code lang="xml"][/code]

這樣一來,在加入主畫面螢幕時就會選擇使用開發者指定的圖片了(至於主畫面上,在圖片上蓋一層反光效果是 iPhone/iPod Touch 自己會處理的,你不必自己畫出來)。

使用 JavaScript 及簡單的 DOM 操作

要在畫面上加入 JavaScript,跟一般網頁設計一樣用 script 標籤就可以了,不過在 HTML5 中,script 標籤不再需要指定 type 屬性,所以你可以寫出像這樣的程式碼:

[code lang="xml"][/code]

或是:

[code lang="xml"][/code]

而目前大部份的 Mobile 瀏覽器都至少支援 W3C 的標準,程式碼可以相較於一般 WebApp 要考慮 cross-browser 相容的問題(大多是處理 IE)簡單許多,而在 DOM 的操作上,都可以直接使用 document.getElementsByClassName 或是 document.querySelector 這些函數來取得 DOM 物件。值得一提的是 HTML5 規格書中定義的 document.querySelectordocument.querySelectorAll,這兩個函數(差別在取一個或是取多個)讓你可以透過 CSS selector 的語法來取得 DOM 物件,例如:

[code lang="javascript"]var elem = document.querySelector('li.foo, li.bar');[/code]

這樣就會取出符合 li.foo, li.bar 元素的第一個,若要全部取回來則可以使用 document.querySelectorAll

[code lang="javascript"]var elems = document.querySelectorAll('li.foo, li.bar');[/code]

如此一來,在操作 DOM 物件上是不是就容易許多了呢?(在不必使用 jQuery 或是 Sizzle 的情況下)

  • Dig

    請教下, portrait 到 landscape 的 viewport 確定是 1.5x嗎?还是用 resolution 算的呢?

  • 用 resolution 算的

  • Chris

    Maybe it’s the syntax issue, those old posts can’t display the syntax correctly now. But you can still read it by checking the page source code.

  • Pingback: 以 HTML5 開發 Mobile Web App | Pearltrees()