2014年8月13日 星期三

HTML5+CSS3智慧型手機專用網站設計:Chapter 1 建構支援網站 書摘

getImage
Chapter 1
建構支援智慧型手機語平板電腦的網站
1.支援智慧型手機語平板電腦的網站的發展沿革
隨著iPhone的普及,以iPhone讀取電腦網頁的問題也開始陸續被發現,因此有人開始依照iPhone螢幕的320x480像素設計專用網頁。
當搭載著Android系統的裝置於2008年問世之後,iPhone獨佔智慧型手機市場的情況就產生微變。
行動裝置並非只有智慧型手機。比智慧型手機更大型的裝置被命名為「平板電腦」。自從2010年Apple公司推出iPad平板電腦之後,眾家公司為了趕上Apple公司,紛紛推出搭載Android系統的平板電腦。
網頁並不僅得支援iPhone或iPad,也同時必須相容於Android系統的智慧型手機與平板電腦。以「回應式網頁設計」(Responsive Web Design)的技巧設計網站,算是最為普遍而有效的方法。

2.回應式網頁設計
回應式網頁設計可依照螢幕的寬度變更網頁的編排,是一種能同時支援多種裝置的網頁製作方式。
「回應式網頁設計」是於2010年由「Ethan Marcotte」所倡導的網頁製作手法。
回應式網頁設計W3C十分推薦這種技巧之餘,這種技巧也被命名為「One Web」。
從SEO(搜尋最佳化)的角度來看,Google和Bing這類搜尋引擎也十分贊成以單一網址管理單一內容的「One Url」方式。
裝置螢幕的寬度:
10577157_10152639285394696_4179543194918586384_n
3.基於density設計的Viewport
density密集(度) 的值會隨著個裝置dpi(或是ppi)設定。dpi可由裝置的螢幕尺寸及螢幕解析度算出,而裝置解析度分為idpi、mdpi、hdpi、xhdpi四種。
10583881_10152639681639696_6004809410065338317_n

Viewport就是裝置的螢幕到底是幾像素乘幾像素的設定。ios或Android內建流覽器將Viewport的寬度設定為800像素及980像素。
瀏覽器的Viewport的寬度可透過<metaname=''viewport''>設定。
使用依density設定的Viewport,就能在不同尺寸的裝置上,顯示相同範圍的內容,這完全是因為density設定的Viewport的解析度是由下列公式所定義:
10439427_10152639866789696_7998445001755762869_n
4.專為切換版面的寬度設計
網頁設計的重點在於套用流動版面的設定,藉此決定版面裡有幾個流動框架與靜態框架。


格內相關:
讚的力量:Facebook這樣玩就對了!
《Mr. Jamie 網路創業七堂課》:靈活不說死
部落格小史及回憶
玩網拍的點點滴滴
Adsense廣告配置高收益三法則
用Google Analytics「網頁活動分析」看部落格/網站配置效率

沒有留言:

張貼留言