## 前言 基于web兼容思想，將兼容問題進行分類，并作出了兼容適配文檔，以供參考。 ## 一 瀏覽器兼容 #### 1.1 瀏覽器兼容列表以及版本 | 瀏覽器 | 最新版本 | 占有率 | 備注 | | --- | --- | --- | --- | | 谷歌（ideal瀏覽器，40%） | 55.0 | 38.68% | 理想瀏覽器，開發瀏覽器(webkit) | | 360安全瀏覽器 | 8.1.1 | 15.59%（包括ie8） |雙內核（兼容ie內核，極速webkit內核） | | 搜狗瀏覽器 | 7.0.6 | 4.46% | 雙內核（兼容ie內核，極速webkit內核） | | 火狐瀏覽器 | 50.1.6 | 1.97% | 火狐內核（gecko） | | Sari(蘋果系統） | 8.0.1 | | | | Ie8,ie11,edge | 11,edge | Ie9:5.68%; | 向下最低兼容ie8,9、10引導用戶升級或者更換瀏覽器（Trident） | * 瀏覽器兼容列表 網站項目前端頁面支持的瀏覽器列表，不在此列表內的瀏覽器不做兼容，引導用戶去下載谷歌瀏覽器，如果是ie引導用戶升級。瀏覽器兼容是指該網站全部頁面可正常顯示以及流程可通，不保證全部效果以及特殊功能可實現。具體詳見下面的兼容標準。其他瀏覽器市場占有率參考：qq：5.59%，2345:4.73%，ie7:4.13%,獵豹：2.25%，其他16.91%。數據來源于百度統計，僅供參考。 * 瀏覽器版本 測試與前端保持一致的瀏覽器最新測試版本，不在最新版本的用戶引導用戶升級，瀏覽器版本在每個季度開始檢測一次是否有新版，如果有請測試以及前端更新版本并更改標準文檔的瀏覽器版本記錄。 * 備注：希望產品能定義好產品的最終顯示效果，以谷歌為最佳顯示器考慮，ie可兼容不可保證完美效果，做好預先的準備工作（產品設計環節以及項目開始環節）。對于ie或者其他瀏覽器不支持的，有對應的產品替代方案或者提示語。 ### 二 不同分辨率兼容 #### 2.1 主要分辨率列表 | 分辨率 | 比例（單位：%，包括手機，僅供參考） | 備注 | | --- | --- | --- | | 1900*1200 | 15 | 后期主要分辨率 | | 1336*768 |8.4 | 14寸電腦普通分辨率 | | 1024*768 | 3.9 | 14寸電腦低分辨率，ipad，醫院設備分辨率| | 1280*1024 | 極少 | 部分醫院設備分辨率 | | 1440*900 | 5.91 | 14寸電腦主打高分辨率 | | 1600*900 | 2.92 | 部分高分辨率設備 | | 1920*1080 | 12 | 高分辨率 | | 720*1080 | 5.13 | 手機分辨率，可忽略 | * 分辨率列表：主要兼容三種1024*768,1336*768,1900*1200，其他瀏覽器除非用戶特殊要求才會測試或者適配。另外：經反饋，醫院設備多為1024*768,1280*1024，如果是內網網站產品，可以針對特定用戶做特定設計。另外網站頁面視圖寬度要比實際分辨率小15左右，高度要小150，建議比如1024*768分辨率，設計稿一屏內容大小做成1000*600 的，同時考慮到產品、設計考慮所有分辨率下的正常顯示，不可能所有分辨率的顯示效果完全相同。 * 分辨率適配要求：向下適配最低1024*768，整體布局正確。 #### 2.2 主要分辨率列表 * 不同分辨率適配布局方式 | 布局方式 | 說明 | | --- | --- | | 固定布局 | 按照設計稿取值，所有元素固定寬高，一套設計稿一套樣式 | | 流式布局（百分比布局） | 按照設計稿取百分比，部分位置取固定值，需要產品以及設計考慮到最低分辨率1024*768時，各個位置的顯示，一套設計稿，一套樣式 | | 響應式布局（媒體查詢+流式布局） | 按照不同分辨率以及不同分辨率下對應顯示方案的設計稿做出頁面，多產品多設計稿多樣式方案，成本以及工作量最大。 | * 補充說明：要求產品在設計開始時考慮到不同分辨率的顯示，以及使用何種布局方式，并與設計、前端、測試反饋溝通好。 ## 三 兼容適配鑒定 ### 3.1 問題分類（以下主要針對ie8可行性做特殊說明） #### 3.1.1 布局樣式 * **描述**：頁面排版，元素位置，元素大小等類似 **要求**：必須適配兼容 #### 3.1.2 效果 ：靜態效果+動態效果 * **描述**：靜態效果，比如圓角，旋轉，透明度，特殊字體，輸入框提示文字,h5的部分標簽。 **要求**：圓角可實現，透明度可實現，特殊字體可用圖片，輸入框提示可模擬可引入插件，旋轉變形不可實現可以用圖片以及js模擬（復雜的放棄）。 * **描述**：動態效果，比如飛入飛出，漸變進入，百葉窗，復雜運動效果。 **要求**：使用前參考是否有對應的參考效果，測試兼容性，如果不兼容，放棄。主要針對：css3中的屬性：transform相關的。詳細兼容性說明參考：http://caniuse.com。谷歌瀏覽器實現都需要額外調研或者花費時間才能搞定的效果列入調研部分，不屬于普通兼容問題。 #### 3.1.3 復雜的，酷炫的，功能性的效果或者插件 * **描述**：滑屏，swipper插件等類似的布局插件，切換插件。 要求：兼容性參考官網說明或者咨詢前端（以前端組長——張兵的回復為準）。 * **描述**：未實現過的或者本身不支持ie8的輪播圖插件，效果插件等。 **要求**：參考插件的說明文檔，針對是否支持做兼容，如果不支持做代替效果或者提示語。 * **描述**：功能性插件比如日期控件，下拉框控件，相冊控件，交互控件 **要求**：同上。 * **描述**：基于畫布或者3d效果或者h5特定標簽的，比如echarts,放大鏡，粒子效果，h5游戲等。 **要求**：同上。 #### 3.1.4 特殊兼容，未實現過的產品體驗需要調研的部分 * **描述**：當某部分插件或者特殊效果在谷歌不可用或者在ie8明確不兼容時，需要提交需求到前端進行1-2天的技術調研，給予回復以及對應的解決方案。 **要求**：盡量將這樣的需求或者實現預先反饋，建議在項目開始時就進行調研，對應的項目前端人員全心負責常規頁面和常規兼容，等這部分調研結果出來，在決定對應的項目中如何具體實現或者ie8兼容方案。 ## 四 兼容適配的核心思想 #### 4.1 兼容適配的整體原則 1)保證規定瀏覽器以及規定分辨率下樣式布局正確，顯示正確，常規功能可用，與設計稿達到95%以上的效果符合。 2)網站整體風格一致，實現組件或者組成部分可復用，可移植。 3)網站產品以谷歌最新版本為最佳體驗瀏覽器，其他瀏覽器允許一定的顯示誤差以及插件或者效果稍差，ie8在技術不支持的情況下，做產品體驗降級，但要保證基本布局以及功能。 4)整體的網站中建議使用常規的方式，部分產品體驗做提升。針對高大上酷炫的整體產品，每一個細節都要詳細調研，是否可行，是否兼容，是否可改成需求的效果。 5)網站在提交測試之前，前端做基本的兼容以及分辨率測試，減少測試工作量以及不必要的問題。 6)用戶不明確或者強烈要求適配ie8時，適當降低驗收標準，保證主流瀏覽器可用尤其谷歌，ie8可正常顯示；用戶明確要求只適配ie8以及特定分辨率時，優先重點適配ie8，其他主流瀏覽器降低標準，谷歌正常顯示； #### 4.2 兼容適配的周期 首先所有項目無特殊說明，都要達到以上描述的兼容適配效果，但建議前端或者項目開發中，如果項目緊急需要上線的，先整體以及谷歌顯示歸納為一期，，優先上線，相關兼容放到二期開發；如果項目不緊急，不需要馬上上線，也是優先建議保證谷歌正常；公司內部網站或者定位高端的網站，舍棄ie8體驗，直接引導用谷歌。