Web前端兼容性指南

1、Web前端兼容性問題

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

 

前端兼容性問題分三類：

• 瀏覽器兼容性
• 屏幕分辨率兼容性
• 跨平臺兼容性

 

一、瀏覽器兼容性問題

第一次瀏覽器大戰發生在上個世紀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在多方面作了很大改進，但在HTML五、CSS 3等標準支持方面仍落後於其餘瀏覽器對手。這三個版本的IE是全部兼容性問題的最大根源，堪稱前端噩夢。

 

IE六、七、8不支持HTML五、CSS三、SVG標準，可被斷定爲「極難兼容」

IE9不支持Flex、Web Socket、WebGL，可被斷定爲「較難兼容」

IE10部分支持Flex（-ms-flexbox）、Web Socket，可被斷定爲「較易兼容」

IE11部分支持Flex、WebGL，可被斷定爲「較易兼容」

 

IE六、七、八、9可視爲「老式瀏覽器」

IE十、11可視爲「準現代瀏覽器」

Chrome、Firefox、Safari、Opera 、Edge可視爲「現代瀏覽器」

 

瀏覽器與Windows版本份額

Statcounter的各項數據以2020年6月爲基準。

http://gsa.statcounter.com/

 

statcounter全球/國內桌面瀏覽器份額：

全球桌面瀏覽器	份額	國內桌面瀏覽器	份額
Chrome	68.33%	Chrome	39.85%
Safari	9.40%	360 Safe	22.26%
Firefox	8.91%	Firefox	9.28%
Edge Legacy	4.41%	QQ Browser	6.50%
IE	3.00%	IE	5.65%
Opera	2.41%	Sogou Explorer	4.74%

 

Statcounter 全球/國內Windows版本份額：

全球Windows版本	份額	國內Windows版本	份額
Win10	72.90%	Win10：	47.14%
Win7	19.95%	Win7：	46.79%
Win8.1	4.70%	WinXP：	3.29%
Win8	1.09%	Win8.1：	1.67%
WinXP	0.87%	Win8：	0.61%
WinVista	0.44%	Win2003：	0.41%

 

二、屏幕分辨率兼容性問題

在不一樣的屏幕分辨率，瀏覽器頁面展現差別很大。特別是屏幕分辨率較小時，容易發生佈局錯亂。爲了解決這個問題，響應式UI框架應運而生。

 

主流桌面屏幕分辨率寬度集中在1280~1920，高度集中在720~1080；

主流平板屏幕分辨率寬度集中在962~1280，高度集中在601~800。

主流移動屏幕分辨率寬度集中在360~414，高度集中在640~896。

 

典型的桌面屏幕分辨率：1920x1080

典型的便攜屏幕分辨率：1366x768

典型的平板屏幕分辨率：768x1024

典型的移動屏幕分辨率：360x640

 

Bootstrap定義（參考系是邏輯分辨率）：

分辨率	設備名	典型屏幕
>=1400px	xxl 超超大屏設備	桌面屏幕
>=1200px	xl 超大屏設備	便攜屏幕
>=992px	lg 大屏設備	豎屏桌面屏幕、橫屏平板屏幕
>=768px	md 中屏設備	豎屏平板屏幕
>=576px	sm 小屏設備	橫屏移動屏幕
<576px	xs 超小屏（自動）設備	豎屏移動屏幕

注：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。

  

  

屏幕分辨率基礎概念說明

縮寫	全稱	說明
PX	Device Pixels	設備像素，指設備的物理像素
PX	CSS Pixels	CSS像素，指CSS樣式代碼中使用的邏輯像素
DOT	Dot	點，屏幕或打印紙上的點，等同物理像素
PT	Point	點（傳統長度單位）爲1/72英寸=0.35mm
PT	iOS Point	點（iOS長度單位），爲1/163英寸，等同於CSS邏輯像素
DP	Density independent Pixels	設備無關像素（Android長度單位），爲1/160英寸，等同於CSS邏輯像素
SP	Scale independent Pixels	縮放無關像素（Android字體單位），等同於CSS邏輯像素，但文字尺寸可調（單獨縮放）
DPR	Device Pixel Ratio	設備像素比，指CSS邏輯像素對於物理像素的倍數
DPPX	Dots Per Pixel	等同於DPR
PPI	Pixel Per Inch	屏幕上每英寸(2.54釐米)的像素點個數
DPI	Dots Per Inch	屏幕或紙上每英寸(2.54釐米)的點個數，標準密度：傳統打印=72；Windows=96；Android=160；iOS=163。
DPIR	DPI Ratio	DPI縮放比例，指DPI對於Windows標準DPI的倍數=DPI/96，等同於DPR

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

 

各平臺屏幕分辨率份額

statcounter全球/國內桌面屏幕分辨率份額：

全球桌面屏幕分辨率	份額	國內桌面屏幕分辨率	份額
1366x768	23.42	1920x1080	32.3
1920x1080	20.44	1366x768	12.61
1440x900	7.01	1440x900	8.3
1536x864	7	800x600	6.78
1600x900	4.63	1536x864	4.47
1280x720	4.05	1600x900	4
1280x800	3.41	1024x768	3.16
1280x1024	3.15	1280x720	3.12
1024x768	3	2560x1440	2.72
1680x1050	2.5	1680x1050	2.67
2560x1440	1.95	1280x800	1.9
1360x768	1.48	360x640	1.55
768x1024	1.26	360x780	1.45
1920x1200	1.08	1200x1366	1.31
360x640	0.89	1280x1024	1.26
800x600	0.83	1360x768	0.78
2048x1152	0.46	360x760	0.76
360x780	0.39	360x720	0.71
360x720	0.38	1920x1200	0.59
1093x615	0.36	2048x1152	0.53
Other	12.3	Other	9.06

 

statcounter全球/國內移動屏幕分辨率份額：

全球移動屏幕分辨率	份額	國內移動屏幕分辨率	份額
360x640	23.52	360x640	31.22
375x667	7.74	360x780	9.39
360x720	4.98	1920x1080	9.07
360x760	4.55	360x760	6.18
414x896	4.32	360x720	5.96
414x736	3.98	375x667	5.64
375x812	3.95	414x736	4.91
360x780	3.88	375x812	2.41
412x846	3.86	414x896	2.09
360x740	3.21	393x851	1.63
412x732	2.19	360x748	1.58
320x568	1.91	800x600	1.42
720x1280	1.91	393x786	1.42
412x869	1.85	393x818	1
412x892	1.82	640x360	0.88
1080x1920	1.36	360x770	0.83
320x570	1.25	393x699	0.73
393x851	1.09	1080x1920	0.72
320x534	1.01	320x568	0.69
393x786	0.99	412x732	0.67
Other	20.62	Other	11.55

 

三、跨平臺兼容性問題

隨着移動和平板市場的日益發展，Web在桌面、平板、移動平臺上的兼容性問題日益突出。因爲移動和平板是觸摸式操做，與桌面的鼠標操做方式有很大差別，所以在不一樣平臺上要作相應修改。爲了解決這個問題，誕生了跨平臺框架，在不一樣平臺上，外觀、佈局、操做都有差別化修改。

 

各平臺份額

statcounter全球/國內平臺份額：

全球平臺	份額	國內平臺	份額
Mobile	50.34%	Mobile	60.76%
Desktop	46.67%	Desktop	38.01%
Tablet	2.99%	Tablet	1.23%

 

2、前端里程碑框架

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

 

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

1、DOM操做框架，表明框架：jQuery

2、響應式框架，表明框架：Bootstrap

3、前端MVC框架，表明框架：React、Angular、Vue

 

一、JQuery

2006年1月John Resig等人建立了jQuery；8月，jQuery的第一個穩定版本。jQuery是DOM操做時代前端框架最優秀，也幾乎是惟一表明；可是在以React爲表明的新式前端框架崛起以後，迅速沒落。

 

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

 

二、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瀏覽器

 

三、React

React 起源於 Facebook 的內部項目，在前端MVC框架大潮中誕生並走紅。2013年5月開源，憑藉Virtual Dom，JSX，Flux，Native等一大批創新特性，迅速吸引了大量開發人員，至今還是最早進的前端JS框架。

 

四、Angular

AngularJS 誕生於2009年，由Misko Hevery 等人建立，後爲Google所收購。因爲Google不差錢，因此AngularJS經歷顛覆性升級爲Angular。Angular最大的特色就是大而全。

 

五、Vue

2013年，在Google工做的尤雨溪，受到Angular的啓發，從中提取本身所喜歡的部分，開發出了一款輕量框架，最初命名爲Seed，後改名爲Vue。

 

3、瀏覽器兼容框架

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

 

一、normalize.css

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

 

二、html5shiv.js

IE6~IE8識別HTML5標籤，而且能夠添加CSS樣式。

 

三、respond.js

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

 

4、響應式框架

有了jQuery等兼容框架的基礎，開發人員的關注點，逐漸轉移到愈來愈豐富的屏幕分辨率上，除開Bootstrap一家獨大，愈來愈多的響應式框架也在奮起直追。

 

一、Semantic UI

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

Semantic 是一個設計漂亮的響應式佈局的語義化框架。

 

二、Bulma

https://github.com/jgthms/bulma

基於 Flexbox 的現代 CSS 框架

 

三、Tailwind

https://github.com/tailwindcss/tailwindcss

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

 

四、Materialize

https://github.com/Dogfalo/materialize

A CSS Framework based on Material Design.

 

五、Foundation

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

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

 

六、Pure.css

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

A set of small, responsive CSS modules

 

七、YAMLCSS

https://github.com/yamlcss/yaml

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

 

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

 

5、跨平臺框架

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

 

一、Framework7

https://github.com/framework7io/framework7

Build iOS, Android & Desktop apps

 

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

 

二、Ionic

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

build mobile and desktop apps

 

 從上圖能夠看出，主要針對移動平臺優化，但經過API支持多種平臺。

 

三、Onsen UI

https://github.com/OnsenUI/OnsenUI

develop HTML5 hybrid and mobile web apps

 

 從上圖能夠看出，主要針對移動平臺優化，但經過API支持多種平臺。

 

四、Quasar Framework

https://github.com/quasarframework/quasar

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

 

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

五、UNI-APP
 

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

使用 Vue.js 開發全部前端應用的框架

 

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

 

六、橫向對比

框架	桌面優化	移動優化	移動一致	支持框架
Framework7	優秀	優秀	優秀	最多
Ionic	通常	優秀	通常	較多
Onsen UI	通常	優秀	通常	較多
Quasar	良好	優秀	良好	Vue
UNI-APP	通常	優秀	優秀	Vue

 

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技術不在本次討論之列

 

一、瀏覽器兼容策略

國內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的建議：

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

2、若是必定要兼容，後端返回IE專用頁面，至少兼容IE8。

 

二、屏幕分辨率兼容策略

屏幕分辨率最少要考慮兼容便攜屏幕和移動屏幕兩種。能夠參考去哪兒網的作法，把內容分紅三類：移動端主菜單與導航欄；主要內容；擴展內容。屏幕分辨率高於480，顯示主要內容、擴展內容。屏幕分辨率低於480，顯示移動端主菜單與導航欄、主要內容。

 

若是你的應用是管理軟件，則最好考慮兼容桌面屏幕、便攜屏幕和移動屏幕三種。Bootstrap5新增了超超大屏幕，則就是基於這種考慮。這時候，能夠加入側邊欄自動隱藏/打開，主要內容用Flex方式組織，能夠在頁面中並排顯示多頁（相似於Word的頁面視圖）。

 

三、跨平臺兼容策略

大型網站，手機網站與桌面網站是不一樣的入口，所以不存在兼容，是兩個單獨的應用程序。對於流量較小的網站，平臺的兼容策略主要是應用響應式框架，加上移動端主菜單與導航欄便可，其次能夠選用跨平臺框架來實如今不一樣平臺的差別化體驗。沒有這些框架對於Web網站來講不形成大的體驗降低。而若是須要開發混合移動、桌面應用，則須要認真考慮這些框架，畢竟用戶對本地應用的體驗期待要高不少。

 

 （全文完）