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「網頁活動分析」看部落格/網站配置效率

文章標籤
創作者介紹

卵生水筆仔 第一屆部落格大獎賽藝文類決選,樂多名人,痞客邦電影圈名人,痞客邦推理圈名人,連絡我bluelqe@gmail.com

卵生水筆仔 發表在 痞客邦 PIXNET 留言(0) 人氣()