手機網(wǎng)站重構(gòu)經(jīng)驗分享(S60V3篇)

0 評論 5916 瀏覽 1 收藏 8 分鐘

前言

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

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

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

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

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

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

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

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

盒模型

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

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

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

顏色,背景和字體

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

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

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

文本處理

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

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

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

選擇符與偽類

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

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

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

其他

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

  • 盡量避免使用table

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

經(jīng)驗總結(jié)

  • 語義化的標簽,和圖片合并技術(shù),現(xiàn)階段是不適合應(yīng)用在手機網(wǎng)站上(囧)
  • 一套CSS就能適應(yīng)全平臺的瀏覽器,這僅僅是個夢想
  • 我們才剛剛起步!期待大家的共同研究和分享!!
更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!