手機網站開發必修課[2]：瀏覽器兼容性測試

本文來自：http://www.fool2fish.cn/?p=320 1 爲什麼要有兼容性測試：比web瀏覽器還恐怖的手機瀏覽器 對於web網站，一般來說，目前我們需要兼容的是 1個操作系統（windows）X 3種瀏覽器（ie 6、ie7、firefox）= 3種情況 要求高一點的web網站需要兼容的是 1個操作系統（windows）X 7種瀏覽器（ie6、ie7、firefox、chorme、opera、safari、遨遊）+ 1個操作系統（mac） X 1種瀏覽器（safari）= 8種情況 注：以上瀏覽器除了ie外，均指其最新版本。另，遨遊瀏覽器雖然是基於ie內核，但某些表現卻完全出人意料，故也加入考慮。 好了，以上最多8種需要兼容的情況，已經讓人大呼頭痛不已，何況事實上這些瀏覽器對html代碼本身的解析都是沒問題的，你比較需要費心的只是ie6的css和js。 那麼手機瀏覽器有多少種需要兼容的情況呢？ 從上一篇文章《手機網站開發必修課[1]：手機瀏覽器》看來，如果要做到比較好的兼容性，我們要兼容的手機瀏覽器至少有二十種情況（手機自帶的瀏覽器+用戶可安裝的瀏覽器） web瀏覽器的兼容性大致可根據瀏覽器的渲染引擎來確定兼容類型，但手機瀏覽器，即使是使用的同一個渲染引擎，在不同的手機上表現也可能很不一樣。 還有兩個更令人頭痛的問題： 你沒法使用css hack 你也沒法逐一去測試各瀏覽器的實際效果 所以，當你涉足手機網站開發的時候，你纔會感概，web瀏覽器們真是太仁慈了。 不過事情還不算太壞，就目前來看，基於手機瀏覽器的限制，一般手機網站的佈局和功能不會太複雜，而高級一些的手機瀏覽器（如iphone等）兼容性還是很理想的，不用操心。 不管怎樣，對於一個專業的手機網站來說，有一份專業的瀏覽器兼容性測試報告是非常有必要的。面對成百上千的手機型號，還有日益強大的山寨機，我們的兼容性測試要覆蓋哪些機型呢？ 2 目標用戶數據挖掘 我們基本不可能兼顧到所有類型的手機瀏覽器，所以你必須要根據你的用戶數據來決定要測試兼容性的手機型號。 你的手上需要有以下數據： 你的網站訪問的手機型號統計 用戶訪問你的網站的主要行爲 如果拿不到這些數據，那麼接下來的兼容性測試將會艱難很多，你不得不通過廣撒網的方式，測試儘可能多的手機（而不是主要目標客戶羣的手機）來確認某些屬性的兼容性，這可不是一個好主意，相信讓你的老闆掏銀子給你採購幾十乃至上百臺手機不太現實。 總的來說，你需要得到測試手機的以下數據： 手機型號、操作系統、瀏覽器類型、屏幕尺寸、顏色深度 3 安排測試，整理測試結果 當我們設計測試點的時候，應該涵蓋哪些內容呢？ 對xhtml代碼本身的支持度，如是否支持 對特殊字符的支持度，如★◆ 對css的支持度 對css不同引入方式的支持 對css的屬性的支持 對css某屬性不同屬性值的支持，如margin的取負值、background-repeat的不同取值 對css選擇器的支持，如tag，class，id，選擇器的嵌套 對css高級選擇器的支持 對js的支持度 目前還不太可能在手機上創建很複雜的js效果，可以僅測試js的基本功能，比如對事件的支持，當然，使用js最重要的是要考慮好如何優雅降級，確保用戶在沒有js的情況下也能順利完成任務 對圖片的支持度 支持圖片類型，包括gif非透明背景、gif透明背景、gif動畫圖、jpg、png8非透明背景、png8透明背景、png24非透明背景和png24透明背景 支持圖片顏色，如色彩複雜的圖片，光滑漸變的圖片 設計一個專用於測試的excel表格，方便測試人員填寫測試結果也是非常重要的工作，如果這一步沒有做好，也許你之前所有的努力都將白費。傳承有價值的研究結果，其意義不低於研究本身。 由於之前所進行的手機兼容性研究工作都屬於公司商業機密，具體測試表格無法公示，有興趣的同學可以單獨交談。