- 相關(guān)推薦
手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)注意事項(xiàng)
用手機(jī)上網(wǎng)時(shí)，有些網(wǎng)站會(huì)無(wú)法正常顯示，因?yàn)檫@些網(wǎng)頁(yè)是設(shè)計(jì)在電腦上看的，如果網(wǎng)頁(yè)開(kāi)發(fā)者沒(méi)有考慮到手機(jī)的軟硬件特性以及人們的閱讀習(xí)慣，就無(wú)法設(shè)計(jì)出手機(jī)上方便閱讀的網(wǎng)頁(yè)。說(shuō)的簡(jiǎn)單，但是要把既有網(wǎng)頁(yè)砍掉重練、再移植到手機(jī)上是一項(xiàng)大工程，筆者歸納四個(gè)方面給網(wǎng)頁(yè)開(kāi)發(fā)人員參考。
一、與計(jì)算機(jī)共享同一套網(wǎng)頁(yè)
這里的與計(jì)算機(jī)共享網(wǎng)頁(yè)，指的是計(jì)算機(jī)用的網(wǎng)頁(yè)完全不經(jīng)修改、就直接給手機(jī)瀏覽。前提是網(wǎng)站本身的元素要夠簡(jiǎn)單、版面不能太復(fù)雜。
二、制作手機(jī)專(zhuān)用網(wǎng)頁(yè)
這個(gè)做法在90年代非常盛行，當(dāng)時(shí)電信業(yè)者的GPRS/WAP廣告打得正火熱，手機(jī)能瀏覽的網(wǎng)站都是WAP網(wǎng)站，也就是用WML編寫(xiě)的手機(jī)網(wǎng)，WML是很簡(jiǎn)陋的HTML，內(nèi)容通常只有文字跟選單。
▲用這個(gè)方法的好處是，WAP可以在所有的手機(jī)上正常顯示，不過(guò)要同時(shí)維護(hù)手機(jī)版和桌面版的網(wǎng)頁(yè)會(huì)很困難，使得信息常常無(wú)法同步。
三、用瀏覽器來(lái)判斷裝置
Opera 有桌面版和手機(jī)版，同樣的Chrome、Safari、Firefox也是。有的網(wǎng)站會(huì)使用瀏覽器嗅探機(jī)制(browsersniffing) 來(lái)判斷你是用哪一種、什么裝置的瀏覽器，不過(guò)browsersniffing的設(shè)定很繁瑣，而且經(jīng)常出差錯(cuò)。最快的方法是在網(wǎng)頁(yè)上加入各種版本的連結(jié)，讓 瀏覽者可以自由選擇格式。
四、開(kāi)發(fā)復(fù)合型網(wǎng)站
復(fù)合版網(wǎng)站就是能同時(shí)給桌面和手機(jī)使用的網(wǎng)站，它跟剛談到的「與計(jì)算機(jī)共享」并不一樣，復(fù)合版網(wǎng)站雖然內(nèi)容相同，但是它會(huì)根據(jù)屏幕大小來(lái)呈現(xiàn)版面。要做復(fù)雜 合型網(wǎng)站其實(shí)并不難，只要用CSS與HTML標(biāo)簽來(lái)調(diào)整就行，比如HTML的viewport以及CSS的media queries。
什么是viewport
Viewport 指的是「畫(huà)面視圖」，它是一堆數(shù)值的組合，白話(huà)一點(diǎn)的解釋就是你可以在畫(huà)面上看到的范圍，可以分成顯示畫(huà)面視圖(display viewport)以及實(shí)際畫(huà)面視圖(actual viewport)二種。對(duì)于計(jì)算機(jī)瀏覽器來(lái)說(shuō)，viewport比較不重要，因?yàn)轱@示畫(huà)面視圖跟實(shí)際畫(huà)面視圖是一樣的。
如果我們?cè)贑SS里寫(xiě)width=200px，表示在顯示器上這個(gè)對(duì)象寬200px，但在手機(jī)上卻不是。CSS規(guī)范中鼓勵(lì)制造商可以自行決定硬件像素要對(duì)應(yīng)到多少顯示像素，比如手機(jī)業(yè)者可能因?yàn)槠聊槐容^小，會(huì)把比例設(shè)定成1:0.5，所以手機(jī)畫(huà)面會(huì)比實(shí)際畫(huà)面小了一半。
怎么調(diào)整呢?只要在HTML的語(yǔ)法中嵌入，把a(bǔ)ctual viewport的值給visual viewport，這樣網(wǎng)頁(yè)就可以完整放入手機(jī)的小屏幕。至于CSS的部分，Opera在今年的W3C CSS會(huì)議中提出了要把viewport標(biāo)簽加入CSS。如果最后順利通過(guò)，以后viewport就可以直接在CSS語(yǔ)法里設(shè)定。
什么是media queries
Media queries是CSS3的新功能，它整合了media type和max min-width/max min-height media type這兩個(gè)屬性，可以在不同的裝置下顯示不同的CSS版面。比如給screen的版面是一般的顯示畫(huà)面，給print的就是打印機(jī)的輸出格式。
以打印機(jī)為例，如果我們不想印出網(wǎng)站的選單列，可以在media type下選擇不同的CSS呈現(xiàn)方式。
以下的范例里頭有兩種CSS media queries的顯示版面，它們是根據(jù)屏幕的大小來(lái)提供顯示內(nèi)容，當(dāng)寬度小于480px，網(wǎng)頁(yè)版面就會(huì)改變，比如sidebar會(huì)移到畫(huà)面下方而不是跟著 主畫(huà)面浮在左邊(float: left)。閱動(dòng)動(dòng)向同時(shí)也會(huì)改變成由上到下，比較適合手機(jī)的垂直式閱讀，免得讀者還要吃力地在小屏幕上左右移動(dòng)。
【手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)注意事項(xiàng)】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)總結(jié)11-09
網(wǎng)頁(yè)設(shè)計(jì)報(bào)告07-31
怎樣網(wǎng)頁(yè)設(shè)計(jì)03-30
普通網(wǎng)頁(yè)設(shè)計(jì)與淘寶網(wǎng)頁(yè)設(shè)計(jì)有什么不同？07-09
網(wǎng)頁(yè)設(shè)計(jì)求職信 個(gè)人求職網(wǎng)頁(yè)設(shè)計(jì)02-21
網(wǎng)頁(yè)制作教學(xué)設(shè)計(jì)02-25
網(wǎng)頁(yè)設(shè)計(jì)實(shí)習(xí)報(bào)告07-16
網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐報(bào)告08-12