前言

做WEB重構(gòu)的同學(xué)都應(yīng)該知道,我們一般需要在一個(gè)操作系統(tǒng)(Windows-XP)和4種以上的瀏覽器(IE678,Firefox,Chrome,Opera等)上測(cè)試頁(yè)面的兼容性。

相對(duì)而言,手機(jī)上的頁(yè)面兼容性測(cè)試,相當(dāng)痛苦!手機(jī)光操作系統(tǒng)都有S60V3,S60V5,MTK,Android,
Windows-Mobile等等,每個(gè)操作系統(tǒng)上除了自帶的瀏覽器,還有至少3種以上可供用戶下載安裝的瀏覽器,要想做到較好的兼容性必須在各種平臺(tái)的手機(jī)上安裝不同的瀏覽器逐一測(cè)試,并總結(jié)出差異與共性。

通過(guò)手機(jī)騰訊網(wǎng)與QQ空間WAP2.0版頁(yè)面制作之后受益匪淺,這次來(lái)先來(lái)分享S60V3平臺(tái)制作經(jīng)驗(yàn)

關(guān)于S60V3和瀏覽器

即SymbianOS操作系統(tǒng)Series 60操作系統(tǒng)的第三版，是S60系列目前使用最廣泛的智能手機(jī)操作系統(tǒng)。

S60V3機(jī)型有: 諾基亞：N73、N82、N85、N95、E61、E71、6120c等,且新機(jī)種不斷推出中……

S60V3平臺(tái)除了自帶的瀏覽器,最常用的瀏覽器有: UC瀏覽器, GO 瀏覽器, Opera Mobile/Mini

在詳細(xì)對(duì)比各瀏覽器對(duì)CSS支持的差異之前,首先來(lái)看一下手機(jī)騰訊網(wǎng)在各瀏覽器下的差異:

盒模型

• 盡量不要為頁(yè)面的元素指定高度
• UCWeb和GO瀏覽器不支持寬度,自動(dòng)100%顯示頁(yè)面
• UCWeb不支持左右邊框,支持上下邊框

• 頁(yè)面使用100%寬度,兼容性最佳!
• UCweb和GO瀏覽器不支持寬度,100%顯示頁(yè)面

• S60平臺(tái)最為普遍的寬度為240px和320px,所以如果你要為頁(yè)面指定一個(gè)寬度,只有一個(gè)選擇:240px
• UCweb和GO瀏覽器不支持寬度,100%顯示頁(yè)面

顏色,背景和字體

• 必須要顯示的圖案,不要用背景圖,直接使用<img>標(biāo)簽
• 避免同時(shí)出現(xiàn)多種文字大小,部分瀏覽器的字體大小是由用戶設(shè)置的
• 不要過(guò)分糾結(jié)于粗體和斜體,這取決于手機(jī)自帶字體的特性

• 為每一個(gè)有背景圖的元素添加背景色
• 背景色和文字顏色組合使用,也能產(chǎn)生很好的視覺(jué)效果
• UCWeb和GO瀏覽器不支持寬度,自動(dòng)100%寬度顯示頁(yè)面

• 如果你的頁(yè)面使用的是100%的寬度.背景圖最好使用可以平鋪或重復(fù)的圖片

文本處理

• 設(shè)計(jì)時(shí)盡量避免左對(duì)齊之外的對(duì)齊方式
• 部分瀏覽器鏈接的下劃線是否出現(xiàn)不可控,取決于用戶的設(shè)置
• 字間距和文本縮進(jìn),盡量避免使用

• 合理的使用行高讓頁(yè)面的可讀性更好,不支持指定行高的瀏覽器也有默認(rèn)的行高

• UCWeb支持文本居中,但不支持右對(duì)齊

選擇符與偽類

• 大部分瀏覽器不支持定義已訪問(wèn)連接(a:visited)的顏色,設(shè)計(jì)時(shí)請(qǐng)注意鏈接的背景色不要與該瀏覽器默認(rèn)已訪問(wèn)的連接色接近
• 連接的顏色可以指定,連接是否帶下劃線取決于瀏覽器的設(shè)置

• 合理的使用全局選擇符,提升效率
• class和id選擇符是可以放心使用的

• 可以通過(guò)選擇符支持的差異,來(lái)為不同的瀏覽器實(shí)現(xiàn)不同的效果

其他

各大門戶WAP2.0版使用的DTD與標(biāo)簽

• 盡量避免使用table

• 推薦使用文檔類型為: xhtm mobile profile 1.0 或 1.1
• 推薦使用的標(biāo)簽包括: div,p,span,ul,li,br,img等

經(jīng)驗(yàn)總結(jié)

• 語(yǔ)義化的標(biāo)簽,和圖片合并技術(shù),現(xiàn)階段是不適合應(yīng)用在手機(jī)網(wǎng)站上(囧)
• 一套CSS就能適應(yīng)全平臺(tái)的瀏覽器,這僅僅是個(gè)夢(mèng)想
• 我們才剛剛起步!期待大家的共同研究和分享!!

(本文出自Tencent WSD Blog，轉(zhuǎn)載時(shí)請(qǐng)注明出處)

來(lái)源：http://wsd.tencent.com/2010/07/mobile-web-rebuild-s60v3.html