寫作 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 的情況下)

4 comments

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

  2. 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.

Comments are closed.