為手機開發專用的網頁設計架構
用手機上網時,有些網站設計會無法正常顯示,因為這些網頁是設計在電腦上看的,如果網頁設計開發者沒有考慮到手機的軟硬體特性以及人們的閱讀習慣,就無法設計出手機上方便閱讀的網頁。說的簡單,但是要把既有網頁設計砍掉重練、再移植到手機上是一項大工程,筆者歸納四個方面給網頁設計開發人員參考。
一、與電腦共用同一套網頁設計
這裏的與電腦共用網頁,指的是電腦用的網頁完全不經修改、就直接給手機流覽。前提是網站本身的元素要夠簡單、版面不能太複雜。
二、製作手機專用網頁設計
這個做法在90年代非常盛行,當時電信業者的GPRS/WAP廣告打得正火熱,手機能流覽的網站都是WAP網站,也就是用WML編寫的手機網頁設計,WML是很簡陋的HTML,內容通常只有文字跟選單。
用這個方法的好處是,WAP可以在所有的手機上正常顯示,不過要同時維護手機版和桌面版的網頁設計會很困難,使得資訊常常無法同步。
三、用瀏覽器來判斷裝置
Opera有桌面版和手機版,同樣的Chrome、Safari、Firefox也是。有的網站會使用瀏覽器嗅探機制(browsersniffing) 來判斷你是用哪一種、什麼裝置的瀏覽器,不過browsersniffing的設定很繁瑣,而且經常出差錯。最快的方法是在網頁設計上加入各種版本的連結,讓 流覽者可以自由選擇格式。
四、開發複合型網站
複合版網站就是能同時給桌面和手機使用的網站,它跟剛談到的「與電腦共用」並不一樣,複合版網站雖然內容相同,但是它會根據螢幕大小來呈現版面。要做複雜 合型網站其實並不難,只要用CSS與HTML標籤來調整就行,比如HTML的viewport以及CSS的media queries。
什麼是viewport
Viewport指的是「畫面視圖」,它是一堆數值的組合,白話一點的解釋就是你可以在畫面上看到的範圍,可以分成顯示畫面視圖(display viewport)以及實際畫面視圖(actual viewport)二種。對於電腦瀏覽器來說,viewport比較不重要,因為顯示畫面視圖跟實際畫面視圖是一樣的。
如果我們在CSS裏寫width=200px,表示在顯示器上這個物件寬200px,但在手機上卻不是。CSS規範中鼓勵製造商可以自行決定硬體圖元要對應到多少顯示圖元,比如手機業者可能因為螢幕比較小,會把比例設定成1:0.5,所以手機畫面會比實際畫面小了一半。
怎麼調整呢?只要在HTML的語法中嵌入<meta name=”viewport” content=”width=device-width”>,把actual viewport的值給visual viewport,這樣網頁就可以完整放入手機的小螢幕。至於CSS的部分,Opera在今年的W3C CSS會議中提出了要把viewport標籤加入CSS。如果最後順利通過,以後viewport就可以直接在CSS語法裏設定。
轉貼來源:聖騎天下
參考文獻:
1.林建煌 (2007), 消費者行為, 台北市: 智勝文化.
2.林永惟、宋同正 (2008), 商業平面設計之設計品質, 商業設計學報, 12(), 19-34.
3.李青蓉等編著.(1998).人機介面設計,台北縣:空大。
相關文章
公司的網頁很慢,若想換別家的虛擬主機,要怎麼換?捨棄web2.0網頁設計的趨勢改變網頁設計邁向HTML5新世紀一位DMOZ編輯人員對於提交網頁設計類的網站建議瞭解jQuery網頁設計對網站的影響
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了