手機版網(wǎng)頁設計注意事項

用手機上網(wǎng)時，有些網(wǎng)站會無法正常顯示，因為這些網(wǎng)頁是設計在電腦上看的，如果網(wǎng)頁開發(fā)者沒有考慮到手機的軟硬件特性以及人們的閱讀習慣，就無法設計出手機上方便閱讀的網(wǎng)頁。說的簡單，但是要把既有網(wǎng)頁砍掉重練、再移植到手機上是一項大工程，筆者歸納四個方面給網(wǎng)頁開發(fā)人員參考。

一、與計算機共享同一套網(wǎng)頁

這里的與計算機共享網(wǎng)頁，指的是計算機用的網(wǎng)頁完全不經(jīng)修改、就直接給手機瀏覽。前提是網(wǎng)站本身的元素要夠簡單、版面不能太復雜。

二、制作手機專用網(wǎng)頁

這個做法在90年代非常盛行，當時電信業(yè)者的GPRS/WAP廣告打得正火熱，手機能瀏覽的網(wǎng)站都是WAP網(wǎng)站，也就是用WML編寫的手機網(wǎng)，WML是很簡陋的HTML，內(nèi)容通常只有文字跟選單。

▲用這個方法的好處是，WAP可以在所有的手機上正常顯示，不過要同時維護手機版和桌面版的網(wǎng)頁會很困難，使得信息常常無法同步。

三、用瀏覽器來判斷裝置

Opera 有桌面版和手機版，同樣的Chrome、Safari、Firefox也是。有的網(wǎng)站會使用瀏覽器嗅探機制(browsersniffing) 來判斷你是用哪一種、什么裝置的瀏覽器，不過browsersniffing的設定很繁瑣，而且經(jīng)常出差錯。最快的方法是在網(wǎng)頁上加入各種版本的連結(jié)，讓 瀏覽者可以自由選擇格式。

四、開發(fā)復合型網(wǎng)站

復合版網(wǎng)站就是能同時給桌面和手機使用的網(wǎng)站，它跟剛談到的「與計算機共享」并不一樣，復合版網(wǎng)站雖然內(nèi)容相同，但是它會根據(jù)屏幕大小來呈現(xiàn)版面。要做復雜 合型網(wǎng)站其實并不難，只要用CSS與HTML標簽來調(diào)整就行，比如HTML的viewport以及CSS的media queries。

什么是viewport

Viewport 指的是「畫面視圖」，它是一堆數(shù)值的組合，白話一點的解釋就是你可以在畫面上看到的范圍，可以分成顯示畫面視圖(display viewport)以及實際畫面視圖(actual viewport)二種。對于計算機瀏覽器來說，viewport比較不重要，因為顯示畫面視圖跟實際畫面視圖是一樣的。

如果我們在CSS里寫width=200px，表示在顯示器上這個對象寬200px，但在手機上卻不是。CSS規(guī)范中鼓勵制造商可以自行決定硬件像素要對應到多少顯示像素，比如手機業(yè)者可能因為屏幕比較小，會把比例設定成1:0.5，所以手機畫面會比實際畫面小了一半。

怎么調(diào)整呢?只要在HTML的語法中嵌入，把actual viewport的值給visual viewport，這樣網(wǎng)頁就可以完整放入手機的小屏幕。至于CSS的部分，Opera在今年的W3C CSS會議中提出了要把viewport標簽加入CSS。如果最后順利通過，以后viewport就可以直接在CSS語法里設定。

什么是media queries

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

以打印機為例，如果我們不想印出網(wǎng)站的選單列，可以在media type下選擇不同的CSS呈現(xiàn)方式。

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

【手機版網(wǎng)頁設計注意事項】相關文章：

網(wǎng)頁設計總結(jié)11-09

網(wǎng)頁設計報告07-31

怎樣網(wǎng)頁設計03-30

普通網(wǎng)頁設計與淘寶網(wǎng)頁設計有什么不同？07-09

網(wǎng)頁設計求職信 個人求職網(wǎng)頁設計02-21

網(wǎng)頁制作教學設計02-25

網(wǎng)頁設計實習報告07-16

網(wǎng)頁設計實踐報告08-12

網(wǎng)頁制作教學設計07-28

網(wǎng)頁設計實習總結(jié)05-11