小螢幕移動裝置網頁設計需要注意的事項

WAP能夠運行於各種無線網路之上，如GSM、GPRS、CDMA等。WML是無線註標語言(Wireless Makeup language)的英文縮寫。支援WAP技術的手機能瀏覽由WML描述的Internet內容。

而如今的小螢幕移動裝置，比如手機，都已經具備訪問WWW的能力。其內建的瀏覽器，或是第三方瀏覽器大多是WebKit引擎。

也因此沒人再用WML組織WAP站點了，一般都是用HTML+CSS的方式來建設WAP網站。

在設計小螢幕移動裝置網頁時，你可能先得了解這麼一些前提：

手機螢幕解析度亂得一塌糊塗，什麼解析度都有!

我們的手機上網費用賊貴賊貴!

UC瀏覽器擁有了賊大的市場佔有率!

關於UC瀏覽器：

沒錯，不得不提它。誰叫它的市場佔有率高呢。

對於UC瀏覽器而言，顯然是非常適合我國國情的，它給使用者最大限度地節約手機上網流量。(UC瀏覽器打的口號貌似也就是省流量這一招了)。

基於移動應用，以及文字的可讀性，UC瀏覽器也體現了大字型、大行距等特性。

UC瀏覽器相對於其他手機瀏覽器而言，對HTML標籤和CSS屬性存在有特殊的、自定義的處理方式。

而所做的這些特殊處理，按目前來看，應該將會繼續保留較長一段時間，直到手機上網費用得到較大幅度的下降，令消費者更大膽地移動上網之時。

在實際開發中，我們發現了UC瀏覽器對CSS存在一些“特殊照顧”：

不支援font-family屬性，也就是說，在UC瀏覽器你只能看到一種字型;

不支援font-szie屬性，也就是說，在UC瀏覽器你只能看到一樣大小的字型;

不支援width、height、padding、margin、line-height屬性，也就是說，在UC瀏覽器只能通過p、br等HTML標籤來換行以達到字元上下間隔;

不支援固定畫素的.寬度，100%顯示頁面，也就是說，在UC瀏覽器始終將看到的是“滿屏的”;

不支援浮動、層疊佈局，float和position屬性無效，也就是說，在UC瀏覽器你只能看到“左對齊”。

支援background-color，但不支援background-image，也就是說不支援CSS背景圖顯示，在UC瀏覽器你只能看到背景色。

不過，個人仍然認為，如今建設小螢幕移動裝置網頁網站，完全可依據WebKit引擎的瀏覽器作為標準進行介面開發。

換句話說，我們設計支援UC瀏覽器的網頁，而不是設計以UC瀏覽器為標準的網頁。

這樣做還有個好處，可以在大部分的手機瀏覽器上保證相對一致的樣式。

而針對UC這種連float等標準CSS屬性也不支援的瀏覽器，別過於糾結它!

但為了保證介面中各元素在UC瀏覽器仍具有良好的閱讀順序，嚴重建議HTML編碼人員留意各個HTML標籤的先後順序。

因為只有在支援float、position屬性的瀏覽器下，頁面各個容器才可以任意浮動或層疊的。否則，瀏覽器將按HTML標籤的先後順序顯示。

另外一些小螢幕移動裝置網頁設計的相關補充：

網站頭(header)

考慮到小螢幕移動裝置的一些特性，設計網頁時，有些可以去掉網站頭(包括LOGO、全域性導航什麼的)。

比如flick的檢視大圖頁面就去掉了網站頭。

這裡我自創了一句時髦的設計原則：“針對於小螢幕移動裝置的介面設計，在某些指定任務的介面，應優先於讓使用者關注當前任務，而不是應用程式本身。” 這個原則是行得通的，同樣適用於設計移動裝置應用程式~

打個比方說，如果你在設計小螢幕移動裝置訪問的郵箱時，完全可以在寫信、郵件閱讀頁去掉網站頭~

連結聚焦(hover)

各個瀏覽器均自定義了連結的hover樣式，比如有的瀏覽器給連結聚焦時加了邊框，有的瀏覽器給連結聚焦時加個背景色之類。因此小螢幕移動裝置網頁不需要在CSS中編寫hover樣式。

滑鼠事件(mouseover)

考慮到觸控式螢幕操作，使用者無法用手指進行over的操作，因此應禁止在應用於移動裝置訪問的網頁使用mouseover。