網頁相容性調試

標籤：

網頁相容性調試-流程

寫作規範高品質的代碼出相容性問題的可能性較小。所以出了問題要考慮是否代碼結構不規範

相容性問題兩大原因：
不同解析度下的相容性調試
不同瀏覽器下的相容性調試

顯示器解析度和瀏覽器市場份額
http://tongji.baidu.com/data/browser

QQ同時線上人數和分布
http://im.qq.com/online/index.shtml

瀏覽器分類

國際品牌瀏覽器
IE：ie6 7 8 9 10 11
chrom
firefox
safari
opera

國產山寨牌瀏覽器
360：安全版，極速版
搜狗：相容版，高速版
獵豹：相容版，高速版
遨遊
QQ
taobao
百度。。。

瀏覽器核心
webkit(Bink)：chrom，opera,safari,山寨牌所有極速版瀏覽器(應用最廣)
Trident：ie瀏覽器，山寨牌所有相容版瀏覽器
Gecko：firefox

網頁相容性調試流程

注意：網頁必須有文檔申明，否則容易出現相容性問題 ，尤其是IE

前提：網頁必須在進階瀏覽器下製作，例如chrome，
開發網頁時候，盡量固定式頁面面寬度（960px,980px(推薦),1000px,1200px....）
(如果不固定式頁面面寬度（彈性布局/響應式布局需要專門設計），當頁面內容複雜時，不同解析度下布局會錯位)
網頁製作完成後：

1：chrome下相容性調試
不同解析度下相容性調試
1：自己電腦解析度下網頁相容性
2：比我電腦更小的解析度下調試
縮小瀏覽器寬度高度來類比低解析度情況
如果變形，需要給元素設定固定寬、高、邊距等樣式
3：比我電腦更大的解析度下調試
縮小瀏覽器上的網頁近似類比高解析度情況
注意：只是近似類比，不是完全相同
調試結果僅用於測試網頁超大背景顏色和圖片、網頁模組的置中布局情況
（縮小頁面調試完成後記得回複頁面比例：ctrl+0）

2：其他瀏覽器下相容性調試
所謂其他瀏覽器，狹義指的就是 ie6,ie7,
1：使用chrome製作網頁
2：使用ie查看網頁
先用本系統內建ie查看網頁
再按ie f12，切換ie不同版本查看網頁（注意ie7）
再使用ietester軟體，類比ie6查看網頁
（下面步驟根據需要可做可不做）
如有必要，本機安裝虛擬機器（virtualPC），安裝xp系統，使用內建ie6調試網頁
如有必要，再使用其他瀏覽器（國際、山寨）調試網頁。
3:使用chrom做移動端調試

網頁相容性調試