前言

做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,所以如果你要為頁面指定一個寬度,只有一個選擇:240px
• UCweb和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等

經驗總結

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

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

特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯繫，文章轉自alibuybuy