- 相關(guān)推薦
小屏幕移動(dòng)設備網(wǎng)頁(yè)設計需要注意的事項
WAP能夠運行于各種無(wú)線(xiàn)網(wǎng)絡(luò )之上，如GSM、GPRS、CDMA等。WML是無(wú)線(xiàn)注標語(yǔ)言(Wireless Makeup language)的英文縮寫(xiě)。支持WAP技術(shù)的手機能瀏覽由WML描述的Internet內容。
而如今的小屏幕移動(dòng)設備，比如手機，都已經(jīng)具備訪(fǎng)問(wèn)WWW的能力。其內置的瀏覽器，或是第三方瀏覽器大多是WebKit引擎。
也因此沒(méi)人再用WML組織WAP站點(diǎn)了，一般都是用HTML+CSS的方式來(lái)建設WAP網(wǎng)站。
在設計小屏幕移動(dòng)設備網(wǎng)頁(yè)時(shí)，你可能先得了解這么一些前提：
手機屏幕分辨率亂得一塌糊涂，什么分辨率都有!
我們的手機上網(wǎng)費用賊貴賊貴!
UC瀏覽器擁有了賊大的市場(chǎng)占有率!
關(guān)于UC瀏覽器：
沒(méi)錯，不得不提它。誰(shuí)叫它的市場(chǎng)占有率高呢。
對于UC瀏覽器而言，顯然是非常適合我國國情的，它給用戶(hù)最大限度地節約手機上網(wǎng)流量。(UC瀏覽器打的口號貌似也就是省流量這一招了)。
基于移動(dòng)應用，以及文本的可讀性，UC瀏覽器也體現了大字體、大行距等特性。
UC瀏覽器相對于其他手機瀏覽器而言，對HTML標簽和CSS屬性存在有特殊的、自定義的處理方式。
而所做的這些特殊處理，按目前來(lái)看，應該將會(huì )繼續保留較長(cháng)一段時(shí)間，直到手機上網(wǎng)費用得到較大幅度的下降，令消費者更大膽地移動(dòng)上網(wǎng)之時(shí)。
在實(shí)際開(kāi)發(fā)中，我們發(fā)現了UC瀏覽器對CSS存在一些“特殊照顧”：
不支持font-family屬性，也就是說(shuō)，在UC瀏覽器你只能看到一種字體;
不支持font-szie屬性，也就是說(shuō)，在UC瀏覽器你只能看到一樣大小的字體;
不支持width、height、padding、margin、line-height屬性，也就是說(shuō)，在UC瀏覽器只能通過(guò)p、br等HTML標簽來(lái)?yè)Q行以達到字符上下間隔;
不支持固定像素的寬度，100%顯示頁(yè)面，也就是說(shuō)，在UC瀏覽器始終將看到的是“滿(mǎn)屏的”;
不支持浮動(dòng)、層疊布局，float和position屬性無(wú)效，也就是說(shuō)，在UC瀏覽器你只能看到“左對齊”。
支持background-color，但不支持background-image，也就是說(shuō)不支持CSS背景圖顯示，在UC瀏覽器你只能看到背景色。
不過(guò)，個(gè)人仍然認為，如今建設小屏幕移動(dòng)設備網(wǎng)頁(yè)網(wǎng)站，完全可依據WebKit引擎的瀏覽器作為標準進(jìn)行界面開(kāi)發(fā)。
換句話(huà)說(shuō)，我們設計支持UC瀏覽器的網(wǎng)頁(yè)，而不是設計以UC瀏覽器為標準的網(wǎng)頁(yè)。
這樣做還有個(gè)好處，可以在大部分的手機瀏覽器上保證相對一致的樣式。
而針對UC這種連float等標準CSS屬性也不支持的瀏覽器，別過(guò)于糾結它!
但為了保證界面中各元素在UC瀏覽器仍具有良好的閱讀順序，嚴重建議HTML編碼人員留意各個(gè)HTML標簽的先后順序。
因為只有在支持float、position屬性的瀏覽器下，頁(yè)面各個(gè)容器才可以任意浮動(dòng)或層疊的。否則，瀏覽器將按HTML標簽的先后順序顯示。
另外一些小屏幕移動(dòng)設備網(wǎng)頁(yè)設計的相關(guān)補充：
網(wǎng)站頭(header)
考慮到小屏幕移動(dòng)設備的一些特性，設計網(wǎng)頁(yè)時(shí)，有些可以去掉網(wǎng)站頭(包括LOGO、全局導航什么的)。
比如flick的查看大圖頁(yè)面就去掉了網(wǎng)站頭。
這里我自創(chuàng )了一句時(shí)髦的設計原則：“針對于小屏幕移動(dòng)設備的界面設計，在某些指定任務(wù)的界面，應優(yōu)先于讓用戶(hù)關(guān)注當前任務(wù)，而不是應用程序本身�！� 這個(gè)原則是行得通的，同樣適用于設計移動(dòng)設備應用程序~
打個(gè)比方說(shuō)，如果你在設計小屏幕移動(dòng)設備訪(fǎng)問(wèn)的郵箱時(shí)，完全可以在寫(xiě)信、郵件閱讀頁(yè)去掉網(wǎng)站頭~
鏈接聚焦(hover)
各個(gè)瀏覽器均自定義了鏈接的hover樣式，比如有的瀏覽器給鏈接聚焦時(shí)加了邊框，有的瀏覽器給鏈接聚焦時(shí)加個(gè)背景色之類(lèi)。因此小屏幕移動(dòng)設備網(wǎng)頁(yè)不需要在CSS中編寫(xiě)hover樣式。
鼠標事件(mouseover)
考慮到觸摸屏操作，用戶(hù)無(wú)法用手指進(jìn)行over的操作，因此應禁止在應用于移動(dòng)設備訪(fǎng)問(wèn)的網(wǎng)頁(yè)使用mouseover。
[小屏幕移動(dòng)設備網(wǎng)頁(yè)設計需要注意的事項]相關(guān)文章：
1.小屏幕移動(dòng)設備網(wǎng)頁(yè)設計需要注意的事項
【小屏幕移動(dòng)設備網(wǎng)頁(yè)設計需要注意的事項】相關(guān)文章：
網(wǎng)頁(yè)設計師職位面試需注意的事項07-13
移動(dòng)端網(wǎng)頁(yè)設計的尺寸07-04
愛(ài)車(chē)需要注意的事項07-02
跳槽需要注意的事項04-25
股票開(kāi)戶(hù)需要注意的事項07-03
白領(lǐng)跳槽需要注意哪些事項04-12
汽車(chē)年檢需要注意哪些事項07-03