行動裝置網頁(Mobile Web)的發展(科普)

iPhone帶起的行動裝置網頁時代

直到21世紀初的前幾年,在PDA, 手機等設備上看網頁仍然是一種頗糟糕的經驗。 當時的手機以今天的角度看來,CPU極慢(十位數的MHz,對比今日動輒1.x GHz),螢幕普遍相當小(12吋,對比今日47吋),解析度也極低(相對高階的也不過320x240,對比今日1080p, 2K螢幕), 與當時在桌上型電腦螢幕(800x600~1024x768)上瀏覽的經驗完全不能相比。

直到從2007年Apple發佈第一代iPhone起,行動裝置網頁才有了長足的進步。以今天的角度來看第一代iPhone1,3.5吋螢幕,320x480解析度,就硬體上依然有著重重限制。但是由於Apple在行動裝置網頁上提出了幾個重大發明,這些發明陸陸續續地被各家瀏覽器所採用並成為W3C標準,讓瀏覽行動裝置網頁不再那麼讓人難以忍受。

viewport解放了網頁寬度

由於攜帶便利性的考量,行動裝置的實際螢幕大小無法和桌面相比。在iPhone版Safari瀏覽器問世之前,各家的瀏覽器並沒有可視範圍的概念,只會根據裝置當前的解析度來繪製網頁。 iPhone版的Safari瀏覽器首先支援了「viewport」這個概念。透過這個概念相關的技術,讓使用者得以在行動裝置上,有了接近在桌面設備上瀏覽網頁的體驗。

viewport的中文意義是「視界」,更白話一點就是「可視範圍」。在iPhone上開啟Safari瀏覽器瀏覽網頁時,Safari瀏覽器會將網頁預設繪製到一個980px寬的虛擬畫布上。980px剛好介於當時主流的800px~1024px網頁寬度設計之間,可以正常繪製大多數的網頁。 使用者則是透過大小有限的手機螢幕(可視範圍)觀看這個虛擬畫布上的網頁。透過這種方式,使用者想要看到網頁的其他部份時,可以透過滑動手指來放大,縮小,或移動這個虛擬畫布,好讓感興趣的畫面正好顯示在手機螢幕(可視範圍)上。

行動裝置網頁Mobile Web

在iPhone領頭的智慧型手機興起後,為了更好地服務使用者,除了一般桌面網站外,也漸漸出現專為便利行動裝置瀏覽所設計的網頁。以雅虎奇摩網頁2為例,在網址列上輸入 https://tw.mobi.yahoo.com 可以開啟行動版的雅虎奇摩首頁。

Imgur

這類行動裝置網頁預設提供了符合設備寬度,字級清晰,更容易點擊的界面。

Responsive Web Design (RWD) 響應式網站設計

在行動裝置更為流行後,開始有人喊出Mobile First的呼聲,提倡設計網頁時應從行動裝置版本設計起,再根據裝置的寬度來顯示不同的網頁樣式。這種設計思路被稱為響應式網站設計(Responsive Web Design, RWD)。

例如使用行動裝置瀏覽本站時,所有的額外功能都收藏到左上角的選單中,只留下部落格標題與文章內容。 Imgur

使用桌面瀏覽器瀏覽本站時,才展開顯示各種相關功能。

Imgur

響應式網站設計需要考慮的觀念不少,此前在謀智台客發表的文章3可供初步參考。


  1. 1.http://www.everymac.com/systems/apple/iphone/specs/apple-iphone-specs.html
  2. 2.在網址列上輸入 https://tw.yahoo.com/ 可以連到YAHOO奇摩,輸入 https://tw.mobi.yahoo.com 可以連到行動版
  3. 3.讓網頁應用支援多樣設備