Web前端兼容性指南

一、Web前端兼容性問題

一直以來，Web前端領域最大的問題就是兼容性問題，沒有之一，

前端兼容性問題分三類：

• 瀏覽器兼容性
• 螢屏解析度兼容性
• 跨平臺兼容性

1、瀏覽器兼容性問題

第一次瀏覽器大戰發生在上個世紀90年代，微軟發布了IE瀏覽器，和網景公司的Netscape Navigator大打出手，1998年網景不得不將公司賣給AOL，沒有了對手的IE不思進取，W3C標準支持發展緩慢，為以后的IE兼容性災難埋下了伏筆，到2004年，IE的市場份額達到95%，但在此之后IE的份額逐步遭其他瀏覽器蠶食，主要包括Firefox，Chrome，Safari和Opera，.

2001年8月27日，微軟發布IE6，時隔五年直到2006年才發布了IE7，2009年3月19日，經歷了眾多測驗版后，IE8最終發布，雖然IE8針對舊版IE在多方面做了很大改進，但在HTML5、CSS 3等標準支持方面仍落后于其他瀏覽器對手，這三個版本的IE是所有兼容性問題的最大根源，堪稱前端噩夢，

IE6、7、8不支持HTML5、CSS3、SVG標準，可被判定為“極難兼容”

IE9不支持Flex、Web Socket、WebGL，可被判定為“較難兼容”

IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定為“較易兼容”

IE11部分支持Flex、WebGL，可被判定為“較易兼容”

IE6、7、8、9可視為“老式瀏覽器”

IE10、11可視為“準現代瀏覽器”

Chrome、Firefox、Safari、Opera 、Edge可視為“現代瀏覽器”

瀏覽器與Windows版本份額

Statcounter的各項資料以2020年6月為基準，

http://gsa.statcounter.com/

 2、螢屏解析度兼容性問題

在不同的螢屏解析度，瀏覽器頁面展示差異很大，特別是螢屏解析度較小時，容易發生布局錯亂，為了解決這個問題，回應式UI框架應運而生，

主流桌面螢屏解析度寬度集中在1280~1920，高度集中在720~1080；

主流平板螢屏解析度寬度集中在962~1280，高度集中在601~800，

主流移動螢屏解析度寬度集中在360~414，高度集中在640~896，

典型的桌面螢屏解析度：1920x1080

典型的便攜螢屏解析度：1366x768

典型的平板螢屏解析度：768x1024

典型的移動螢屏解析度：360x640

Bootstrap定義（參考系是邏輯解析度）：

注：Bootstrap5新增xxl，Bootstrap3中的lg>=1200px，無576px檔，

手機螢屏解析度說明

由于手機螢屏尺寸過小，使用原始解析度會使得頁面顯示過小，因此使用了邏輯解析度，用倍數放大的方法來保證兼容性，比如iOS app的UI資源區分@1x、@2x和@3x，這就是指原始解析度對邏輯解析度的倍數，被稱為設備像素比DPR，所以大部分人的手機解析度都是1080x1920，在分類中卻被歸為了360x640，這個解析度和CSS中的PX是一致的，

桌面螢屏解析度說明

移動設備一開始就考慮了DPR，而Windwos桌面的解析度由于歷史原因卻沒有這一概念，于是Windwos引入了DPI，最初是設定DPI，后來是設定DPI比例，比如設定DPI比例=125%，你可以查詢Chrome的window.devicePixelRatio，這時輸出1.25，這說明DPI比例=DPR，但是大部分老程式并不支持DPI（Unaware），所以當你設定高DPI時，只能等比放大，字模糊到眼要瞎，最后落得空有大屏只能用超低解析度，由于Chrome支持DPI，所以并不擔心Web有DPI問題，但需要注意的是與手機螢屏解析度不同，桌面解析度要除以DPI比例，才是邏輯解析度，如1920x1080設定DPI比例=1.25，邏輯解析度實際為1536x864，

螢屏解析度基礎概念說明

注：各廠商概念有重名現象，請注意區分，

各平臺螢屏解析度份額

3、跨平臺兼容性問題 

隨著移動和平板市場的日益發展，Web在桌面、平板、移動平臺上的兼容性問題日益突出，由于移動和平板是觸摸式操作，與桌面的滑鼠操作方式有很大差異，因此在不同平臺上要做相應修改，為了解決這個問題，誕生了跨平臺框架，在不同平臺上，外觀、布局、操作都有差異化修改，

各平臺份額

二、前端里程碑框架

在前端領域，隨著技術的不斷進步，逐步誕生了一些里程碑式的前端框架，這些前端框架，大致也是隨著兼容性問題的發生、發展而誕生、發展的，

這些框架代表了前端應用當時先進、成熟、主流的開發方式與發展方向，兼容性問題也在這些框架的基礎之上不斷得到解決，大致也分為三個階段：

一、DOM操作框架，代表框架：jQuery

二、回應式框架，代表框架：Bootstrap

三、前端MVC框架，代表框架：React、Angular、Vue

1、JQuery

2006年1月John Resig等人創建了jQuery；8月，jQuery的第一個穩定版本，jQuery是DOM操作時代前端框架最優秀，也幾乎是唯一代表；但是在以React為代表的新式前端框架崛起之后，迅速沒落，

• JQuery 1.x兼容IE6+瀏覽器
• JQuery 2.x兼容IE9+瀏覽器
• JQuery 3.x兼容IE9+瀏覽器

2、Bootstrap

Bootstrap原名Twitter Blueprint，由Mark Otto和Jacob Thornton開發，最經典的回應式CSS框架，在2011年8月19日作為開源專案發布，其核心是16列布局柵格系統，使用媒體查詢設定閾值為超小螢屏，小螢屏，中等螢屏，大螢屏，超大螢屏創建不同的樣式，

• Bootstrap 2兼容IE7+瀏覽器
• Bootstrap 3兼容IE8+瀏覽器
• Bootstrap 4兼容IE10+瀏覽器
• Bootstrap 5不兼容IE瀏覽器

3、React

React 起源于 Facebook 的內部專案，在前端MVC框架大潮中誕生并走紅，2013年5月開源，憑借Virtual Dom，JSX，Flux，Native等一大批創新特性，迅速吸引了大量開發人員，至今仍是最先進的前端JS框架，

4、Angular

AngularJS 誕生于2009年，由Misko Hevery 等人創建，后為Google所收購，由于Google不差錢，所以AngularJS經歷顛覆性升級為Angular，Angular最大的特點就是大而全，

5、Vue

2013年，在Google作業的尤雨溪，受到Angular的啟發，從中提取自己所喜歡的部分，開發出了一款輕量框架，最初命名為Seed，后更名為Vue，

三、瀏覽器兼容框架

在前端發展的初期，大多數開發最關注的問題就是瀏覽器兼容問題，迫切需要兼容所有瀏覽器的JS和CSS框架，這階段除了橫空出世的jQuery，還有一些其它方面的兼容框架，

1、normalize.css

讓不同的瀏覽器在渲染網頁元素的時候形式更統一，

2、html5shiv.js

IE6~IE8識別HTML5標簽，并且可以添加CSS樣式，

3、respond.js

使IE6~IE8瀏覽器支持媒體查詢，

四、回應式框架

有了jQuery等兼容框架的基礎，開發人員的關注點，逐漸轉移到越來越豐富的螢屏解析度上，除開Bootstrap一家獨大，越來越多的回應式框架也在奮起直追，

1、Semantic UI

https://github.com/semantic-org/semantic-ui

Semantic 是一個設計漂亮的回應式布局的語意化框架，

2、Bulma

https://github.com/jgthms/bulma

基于 Flexbox 的現代 CSS 框架

3、Tailwind

https://github.com/tailwindcss/tailwindcss

Tailwind是一個底層CSS 框架，快速 UI 開發的實用工具集，提供了高度可組合的應用程式類，可幫助開發者輕松構建復雜的用戶界面，另外Tailwind + Styled Component 簡直是絕配（摘自知乎https://www.zhihu.com/question/337939566），

4、Materialize

https://github.com/Dogfalo/materialize

A CSS Framework based on Material Design.

5、Foundation

https://github.com/foundation/foundation-sites

The most advanced responsive front-end framework in the world.

6、Pure.css

https://github.com/pure-css/pure

A set of small, responsive CSS modules

7、YAMLCSS

https://github.com/yamlcss/yaml

YAML is a modular CSS framework for truly flexible, accessible and responsive websites.

兼容IE6+瀏覽器（能兼容IE6的太稀少了）

五、跨平臺框架

自2009年以來，由于Node.js生態的不斷發展，前端開發的勢力大漲， AngularJS，BackboneJS，KnockoutJS等一批前端MVC框架開始出現，最終伴隨著React、Angular、Vue等框架的脫穎而出，用前端框架開發移動、桌面應用的野心開始暴漲，開始關注不同平臺的差異化，越來越多的跨平臺框架開始出現，

1、Framework7

https://github.com/framework7io/framework7

Build iOS, Android & Desktop apps

 從上圖可以看出，桌面版本比移動版本更緊湊，控制元件風格跟所在平臺近似，支持三種主題：ios、 md、 aurora對應不同平臺，

2、Ionic

https://github.com/ionic-team/ionic

build mobile and desktop apps

 從上圖可以看出，主要針對移動平臺優化，但通過API支持多種平臺，

3、Onsen UI

https://github.com/OnsenUI/OnsenUI

develop HTML5 hybrid and mobile web apps

 從上圖可以看出，主要針對移動平臺優化，但通過API支持多種平臺，

4、Quasar Framework

https://github.com/quasarframework/quasar

基于Vue構建回應式網站、PWA、SSR、移動和桌面應用

 Quasar將一些輔助CSS類附加到document.body：如desktop、mobile、touch、platform-[ios]、within-iframe等

5、UNI-APP 

https://github.com/dcloudio/uni-app

使用 Vue.js 開發所有前端應用的框架

 從上圖可以看出，三種平臺比較一致，但移動版本還比桌面版本還緊湊是什么意思？

6、橫向對比

六、總結

兼容性問題總是伴隨著平臺的擴張而產生的，Web開發面臨的終極問題就是多平臺兼容性問題，根據不同產品，不同階段做部分取舍，應用不同的框架而已，需要支持的平臺，決定了你的選擇，

新的框架或舊框架的新版本基本都不再支持IE，但國內還有5.65% 的IE用戶，而且3.29%的WinXP，46.79%的Win7都是潛在的IE用戶，所以可將其做為一個平臺看待，

• IE Web
• Desktop Web
• Mobile Web
• Tablet Web
• Desktop Hybrid
• Mobile Hybrid
• Tablet Hybrid

注：React Native代表的Native技術不在本次討論之列

1、瀏覽器兼容策略

國內XP用戶還有3.29%，XP用戶既升級不了IE9，也無法安裝新版本Chrome和Firefox ，而IE用戶還有 5.65%，考慮到Windows用戶為87%，所以IE9+的份額應該要少于5.65%-3.29%*87%=2.79%，也就是說IE8以下的用戶要多于IE8以上的用戶，所以支持單獨支持IE9+ 瀏覽器沒有實際意義，要么支持IE6，要么不支持IE，，

看看知名網站對IE8的兼容性，

• 京東會提示“溫馨提示：您當前的瀏覽器版本過低，存在安全風險，建議升級瀏覽器”，但是頁面完全可以正確顯示，幾乎沒有什么例外發生，看來兼容作業很到位，
• 淘寶會出現很多頁面例外，說明IE兼容作業要求不高，基本正常即可，只是象征性的加了幾條兼容性內容，
• 去哪兒網也會出現很多頁面例外，但頁面布局還是正常的，看來也是盡力而為，不做要求，
• 騰訊的頁面只有一個立即更新按鈕，一貫地友好，
• 知乎直接404，好吧，強大，

兼容IE的建議：

一、建議不做任何兼容，IE6~11直接顯示升級瀏覽器按鈕，

二、如果一定要兼容，后端回傳IE專用頁面，至少兼容IE8，

2、螢屏解析度兼容策略

螢屏解析度最少要考慮兼容便攜螢屏和移動螢屏兩種，可以參考去哪兒網的做法，把內容分成三類：移動端主選單與導航欄；主要內容；擴展內容，螢屏解析度高于480，顯示主要內容、擴展內容，螢屏解析度低于480，顯示移動端主選單與導航欄、主要內容，

如果你的應用是管理軟體，則最好考慮兼容桌面螢屏、便攜螢屏和移動螢屏三種，Bootstrap5新增了超超大螢屏，則就是基于這種考慮，這時候，可以加入側邊欄自動隱藏/打開，主要內容用Flex方式組織，可以在頁面中并排顯示多頁（類似于Word的頁面視圖），

3、跨平臺兼容策略

大型網站，手機網站與桌面網站是不同的入口，因此不存在兼容，是兩個單獨的應用程式，對于流量較小的網站，平臺的兼容策略主要是應用回應式框架，加上移動端主選單與導航欄即可，其次可以選用跨平臺框架來實作在不同平臺的差異化體驗，沒有這些框架對于Web網站來說不造成大的體驗下降，而如果需要開發混合移動、桌面應用，則需要認真考慮這些框架，畢竟用戶對本地應用的體驗期待要高很多，

 （全文完）

標籤：Html/Css

上一篇：CSS：清除浮動（額外標簽法、父級添加overflow、偽元素法、雙偽元素法）

下一篇：螢屏解析度基礎概念PX，PT，DP，DPR，DPI說明