- 手機(jī)屏幕分辨率亂得一塌糊涂,什么分辨率都有!
- 我們的手機(jī)上網(wǎng)費(fèi)用賊貴賊貴!
- UC瀏覽器擁有了賊大的市場(chǎng)占有率!
關(guān)于UC瀏覽器:
沒錯(cuò),不得不提它。誰叫它的市占率高呢。
對(duì)于UC瀏覽器而言,顯然是非常適合我國(guó)國(guó)情的,它給用戶最大限度地節(jié)約手機(jī)上網(wǎng)流量。(UC瀏覽器打的口號(hào)貌似也就是省流量這一招了)。
基于行動(dòng)應(yīng)用,以及文本可讀性,UC瀏覽器也體現(xiàn)了大字體、大行距等特性。
UC瀏覽器相對(duì)于其他手機(jī)瀏覽器而言,對(duì)HTML或CSS屬性存在有特殊的、自定義的處理方式。
而所做的這些特殊處理,按目前來看,應(yīng)該是繼續(xù)保留較長(zhǎng)一段時(shí)間,直到手機(jī)上網(wǎng)費(fèi)用得到較大幅的下降。
在實(shí)際開發(fā)中,我們發(fā)現(xiàn)了UC瀏覽器對(duì)CSS存在一些“特殊照顧”:
- 不支持font-family屬性,也就是說,在UC瀏覽器你只能看到一種字體;
- 不支持font-szie屬性,也就是說,在UC瀏覽器你只能看到一樣大小的字體;
- 不支持width、height、padding、margin、line-height屬性,也就是說,在UC瀏覽器只能通過p、br等HTML標(biāo)簽來換行以達(dá)到字符上下間隔;
- 不支持固定像素的寬度,100%顯示頁面,也就是說,在UC瀏覽器始終將看到的是“滿屏的”;
- 不支持浮動(dòng)、層疊布局,float和position屬性無效,也就是說,在UC瀏覽器你只能看到“左對(duì)齊”。
不過,個(gè)人仍然認(rèn)為,如今建設(shè)小屏幕移動(dòng)設(shè)備網(wǎng)頁,完全可依據(jù)WebKit引擎的瀏覽器作為標(biāo)準(zhǔn)進(jìn)行界面開發(fā)。
換句話說,我們?cè)O(shè)計(jì)支持UC瀏覽器的網(wǎng)頁,而不是設(shè)計(jì)以UC瀏覽器為標(biāo)準(zhǔn)的網(wǎng)頁。
這樣做還有個(gè)好處,可以在大部分的手機(jī)瀏覽器上保證相對(duì)一致的樣式。
而針對(duì)UC這種連float等標(biāo)準(zhǔn)CSS屬性也不支持的瀏覽器,別過于糾結(jié)它!
但為了保證界面中各元素在UC瀏覽器仍具有良好的閱讀順序,嚴(yán)重建議HTML編碼人員留意各個(gè)HTML標(biāo)簽的先后順序。
另外作一些小屏幕移動(dòng)設(shè)備網(wǎng)頁設(shè)計(jì)的相關(guān)補(bǔ)充:
- 網(wǎng)站頭(header)
考慮到小屏幕移動(dòng)設(shè)備的一些特性,設(shè)計(jì)網(wǎng)頁時(shí),有些可以去掉網(wǎng)站頭(包括LOGO、全局導(dǎo)航什么的)。
比如flick的查看大圖頁面就去掉了網(wǎng)站頭。
打個(gè)比方說,如果你在設(shè)計(jì)小屏幕移動(dòng)設(shè)備訪問的郵箱時(shí),完全可以在寫信、郵件閱讀頁去掉網(wǎng)站頭~
- 鏈接聚焦(hover)
各個(gè)瀏覽器均自定義了鏈接的hover樣式,比如有的瀏覽器給鏈接聚焦時(shí)加了邊框,有的瀏覽器給鏈接聚焦時(shí)加個(gè)背景色之類。因此小屏幕移動(dòng)設(shè)備網(wǎng)頁不需要在CSS中編寫hover樣式。
- 鼠標(biāo)事件(mouseover)
考慮到觸摸屏操作,用戶無法用手指進(jìn)行over的操作,因此應(yīng)禁止在應(yīng)用于移動(dòng)設(shè)備訪問的網(wǎng)頁使用mouseover。