手機網站重構經驗分享(S60V3篇)

前言

做WEB重構的同學都應該知道,我們一般需要在一個作業系統(Windows-XP)和4種以上的瀏覽器(IE678,Firefox,Chrome,Opera等)上測試頁面的相容性。

相對而言,手機上的頁面相容性測試,相當痛苦!手機光作業系統都有S60V3,S60V5,MTK,Android,
Windows-Mobile等等,每個作業系統上除了自帶的瀏覽器,還有至少3種以上可供使用者下載安裝的瀏覽器,要想做到較好的相容性必須在各種平臺的手機上安裝不同的瀏覽器逐一測試,並總結出差異與共性。

通過手機騰訊網與QQ空間WAP2.0版頁面製作之後受益匪淺,這次來先來分享S60V3平臺製作經驗

關於S60V3和瀏覽器

即SymbianOS作業系統Series 60作業系統的第三版，是S60系列目前使用最廣泛的智慧手機作業系統。

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

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

在詳細對比各瀏覽器對CSS支援的差異之前,首先來看一下手機騰訊網在各瀏覽器下的差異:

盒模型

儘量不要為頁面的元素指定高度UCWeb和GO瀏覽器不支援寬度,自動100%顯示頁面UCWeb不支援左右邊框,支援上下邊框

頁面使用100%寬度,相容性最佳! UCweb和GO瀏覽器不支援寬度,100%顯示頁面

S60平臺最為普遍的寬度為240px和320px,所以如果你要為頁面指定一個寬度,只有一個選擇:240pxUCweb和GO瀏覽器不支援寬度,100%顯示頁面

顏色,背景和字體

必須要顯示的圖案,不要用背景圖,直接使用<img>標籤避免同時出現多種文字大小,部分瀏覽器的字體大小是由使用者設置的不要過分糾結于粗體和斜體,這取決於手機自帶字體的特性

為每一個有背景圖的元素添加背景色背景色和文字顏色組合使用,也能產生很好的視覺效果UCWeb和GO瀏覽器不支援寬度,自動100%寬度顯示頁面

如果你的頁面使用的是100%的寬度.背景圖最好使用可以平鋪或重複的圖片

文本處理

設計時儘量避免左對齊之外的對齊方式部分瀏覽器連結的底線是否出現不可控,取決於使用者的設置字間距和文本縮進,儘量避免使用

合理的使用行高讓頁面的可讀性更好,不支援指定行高的瀏覽器也有預設的行高

UCWeb支援文本居中,但不支援右對齊

選擇符與偽類

大部分瀏覽器不支援定義已訪問連接(a:visited)的顏色,設計時請注意連結的背景色不要與該瀏覽器預設已訪問的連接色接近連接的顏色可以指定,連接是否帶底線取決於瀏覽器的設置

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

可以通過選擇符支援的差異,來為不同的瀏覽器實現不同的效果

其他

各大門戶WAP2.0版使用的DTD與標籤

儘量避免使用table

推薦使用文件類型為: xhtm mobile profile 1.0 或 1.1推薦使用的標籤包括: div,p,span,ul,li,br,img等

經驗總結

語義化的標籤,和圖片合併技術,現階段是不適合應用在手機網站上(囧)一套CSS就能適應全平臺的瀏覽器,這僅僅是個夢想我們才剛剛起步!期待大家的共同研究和分享!!

(本文出自Tencent WSD Blog，轉載時請注明出處)

來源：HTTP://wsd.tencent.com/2010/07/mobile-web-rebuild-s60v3.html