振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
手機版網頁,不是等比例縮小就好
作者 Sunming   
2010/11/15
用手機上網正夯,但是有些網站會無法正常顯示,因為這些網頁是設計給電腦上觀看,如果網頁開發者沒有考慮到手機的裝置特性以及人們的閱讀習慣,就無法設計出手機上方便閱讀的網頁。說的簡單,但是要把既有網頁砍掉重練、再移植到手機上是一門大工程, 筆者歸類四大方向給網頁開發人員參考。

▲供手機瀏覽的網頁可不只是「把版面縮小就好」那麼簡單,瀏覽器版本跟CSS語法也有大不同。

一、與電腦共用同一套網頁

這裡的與電腦共用網頁,指的是電腦用的網頁完全不經修改、就直接給手機瀏覽。前提是網站本身的元素要夠簡單、版面不能太複雜。

二、製作手機專用網頁

這個做法在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語法裡設定。

▲左圖是我們所看到的visual viewport,也就是顯示畫面視圖,右圖則是actual viewport。這兩張圖解釋了為什麼我們在手機上看的網站只有一小部分,因為網頁以為手機的螢幕跟電腦的一樣大。

▲讓actual viewport的數值等於visual viewport,就可以讓完整的網頁植入手機。

何謂media queries

Media queries是CSS3的新功能,它整合了media type和max min-width/max min-height media type這兩個屬性,可以在不同的裝置下顯示不同的CSS版面。比如給screen的版面是一般的顯示畫面,給print的就是印表機的輸出格式。

以印表機為例,如果我們不想印出網站的選單列,可以在media type下選擇不同的CSS呈現方式。

以下的範例裡頭有兩種CSS media queries的顯示版面,它們是根據螢幕的大小來提供顯示內容,當寬度小於480px,網頁版面就會改變,比如sidebar會移到畫面下方而不是跟著主畫面浮在左邊(float: left)。閱動動向同時也會改變成由上到下,比較適合手機的垂直式閱讀,免得讀者還要吃力地在小螢幕上左右移動。

@media all and (min-width: 480px) and (max-width: 800px) {
        #container {width: auto; max-width: 800px;}
        #main {width: 70%; float: left;}
        #sidebar {width: 30%; float: left; margin-bottom: 10px;}
        #pub {width: 30%; margin-left: 70%; float: none;} } @media all and (min-width: 400px) and (max-width: 480px) {
        #container {width: auto; max-width: 480px;}
        #main, #sidebar, #pub {width: 100%; float: none;}
        h1 {position: absolute; top: 0; height: 30px; width: 100%;}
        #sidebar {position: absolute; top: 40px; height: 40px;}
        #sidebar p {display: none;}
        #sidebar ul {padding: 0; margin-top: 10px; overflow: hidden;}
        #sidebar ul li {display: inline; font-size: 15px;}
        #main {position: absolute; top: 80px;}
        #pub, #footer {display: none;}
}

▲這張圖使用Opera Mobile Emulator來顯示viewport的兩個Media queries,它們是按照寬度來改變CSS的呈現。

作者:T客邦  謝子斌(Zi-Bin)

最後更新 ( 2010/11/26 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

Copyright © 2004~2014 惠宇網頁設計公司 / 工作室 All rights Reserved. 简体中文
惠宇首頁關於惠宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇