您的網站應該支持哪些瀏覽器？-IT業界-PHP中文網

Which Browsers Should Your Website Support?

本文是與SiteGround合作創作的系列文章的一部分。感謝您支持使SitePoint成為可能的合作夥伴。

網站/應用程序應該支持哪些瀏覽器？這是一個客戶和開發人員經常提出的問題。簡單的答案是列出前N個主流應用程序。但是，這種策略是否已經變得無關緊要了呢？

要點

網站應該支持哪些瀏覽器這個問題並非易事，它取決於各種因素，例如目標受眾、網站類型和可用資源。
儘管有各種各樣的瀏覽器，但它們都有相同的目標：呈現網頁。但是，沒有兩個瀏覽器以完全相同的方式呈現，這會導致細微的差異，而這些差異在使用尖端技術時會變得更加明顯。
漸進增強技術可以通過建立基線，然後在支持時使用CSS和JavaScript進行增強，來幫助確保網站在每個瀏覽器中都能正常工作。但是，對於具有豐富的自定義界面的應用程序來說，這變得不太實用。
開發人員應該將Web視為一個與設備無關的平台，採用防禦性開發技術，並在各種應用程序中測試他們的項目。他們還應該意識到技術在不斷發展，更複雜的網站或應用程序可能需要持續維護。

最常用的瀏覽器有哪些？

根據StatCounter 2017年5月的統計數據，十大桌面瀏覽器為：1. Chrome——59.37%的市場份額 2. Firefox——12.76% 3. Safari——10.55% 4. IE——8.32% 5. Edge——3.42% 6. Opera——1.99% 7. Android（平板電腦）——1.24% 8. Yandex瀏覽器——0.48% 9. UC瀏覽器——0.41% 10. Coc Coc——0.33%

移動設備現在佔所有網頁使用量的54.25%，因此我們還需要檢查十大手機瀏覽器：1. Chrome——49.23% 2. Safari——17.73% 3. UC瀏覽器——15.89% 4. Samsung Internet——6.58% 5. Opera——5.03% 6. Android——3.75% 7. IEMobile——0.68% 8. BlackBerry——0.26% 9. Edge——0.15% 10. Nokia——0.12%

全球統計數據並不能說明全部情況：- 模式在不同地區差異很大。例如，Yandex是俄羅斯第二大最常用的瀏覽器（12.7%的份額）。搜狗是中國第三大最常用的瀏覽器（6.5%）。 Opera Mobile/Mini在非洲擁有28%的份額。

新的瀏覽器版本定期出現。 Chrome、Firefox和Opera每六週都會收到更新；檢查幾個月前的版本是不切實際的。
相同的瀏覽器在不同的設備和操作系統上的工作方式可能不同。 Chrome適用於各種版本的Windows、macOS、Linux、Android、iOS和ChromeOS，但它並非在任何地方都是相同的應用程序。
在各種設備上，包括遊戲機、電子書閱讀器和智能電視，存在著數量極多且種類繁多的舊版和新版、奇特和精彩的瀏覽器。
您網站的分析數據永遠不會與全球統計數據相符。

瀏覽器差異如此之大嗎？

儘管應用程序種類繁多，但所有瀏覽器都有相同的目標：呈現網頁。它們使用渲染引擎來實現這一點，並且存在一些交叉使用：1. Webkit用於macOS和iOS上的Safari。 2. Blink是Webkit的一個分支，現在用於Chrome、Opera、Vivaldi和Brave。 3. Gecko用於Firefox。 4. Trident用於Internet Explorer。 5. EdgeHTML是Trident的更新版本，用於Edge。

大多數瀏覽器都使用這些引擎之一。它們是不同的項目，擁有不同的團隊，但這些公司（大部分）通過W3C進行合作，以確保新技術能夠以相同的方式被所有人採用。瀏覽器比以往任何時候都更加接近，現代智能手機應用程序與它們的桌面應用程序相匹配。但是，沒有兩個瀏覽器以完全相同的方式呈現。大多數差異都很細微，但隨著您轉向尖端技術，這些差異會變得更加明顯。某個特定功能在一個瀏覽器中可能已完全實現，在另一個瀏覽器中部分實現，而在其他瀏覽器中則不存在。

我的網站可以在每個瀏覽器中運行嗎？

可以。漸進增強（PE）等技術建立了一個基線（可能只有HTML），然後在支持時使用CSS和JavaScript進行增強。最新的瀏覽器可以獲得現代佈局、動畫效果和交互式小部件。舊版瀏覽器可能只能獲得未設置樣式的HTML。其他所有瀏覽器都會獲得介於兩者之間的內容。 PE非常適合內容網站和具有基本基於表單功能的應用程序。當您轉向具有豐富自定義界面的應用程序時，它變得不太實用。您新的協作視頻編輯應用程序不太可能在十年前的IE7中運行。它可能無法在3G網絡上的小屏幕設備上運行。也許可以提供替代界面，但結果可能是一個很少有人願意使用的單獨、笨拙的應用程序。考慮到遺留瀏覽器用戶群的規模，成本將是令人望而卻步的。

網站所有者建議

網站所有者應該了解Web的以下基本原理和約束。 Web不是打印！您的網站/應用程序不會在任何地方都看起來相同。每個設備都有不同的操作系統、瀏覽器、屏幕尺寸、功能等。功能可能有所不同您的網站可以為所有人工作，但體驗和設施會有所不同。即使像日期輸入字段這樣基本的東西也有多種可能性，但理想情況下，核心應用程序將保持可操作。評估您的項目要現實。這是一個內容網站、一個簡單的應用程序、一個類似桌面的應用程序、一個快節奏的遊戲等等。建立瀏覽器兼容性的基本級別。例如，它必須在大多數兩年前的瀏覽器中運行，屏幕寬度為600像素，通過快速的Wi-Fi連接。評估您的受眾不要依賴全球瀏覽器統計數據。主要用戶是誰？他們是IT新手還是技術人員？是個人、小型公司還是政府組織？他們坐在辦公桌旁還是四處走動？沒有一個應用程序適用於所有人——首先關注核心用戶。在可能的情況下檢查現有系統的分析數據，但要了解底層數據。如果您的應用程序在Opera Mini中無法運行，您不太可能有Opera Mini用戶。您是否阻止了很大一部分市場？變化正在發生令人驚奇的是，二十年前編寫的網頁今天仍然可以運行。它不一定會漂亮或可用，但瀏覽器仍然向後兼容。（大部分。<blink></blink>標籤仍然無效！）但是，技術在不斷發展。您的網站或應用程序越複雜，就越有可能需要持續維護。

Web開發人員建議

只要稍加註意，就可以支持各種各樣的瀏覽器。擁抱Web！ Web是一個與設備無關的平台。內容和更簡單的界面可以在任何地方運行：現代筆記本電腦、功能手機、遊戲機、IE6等等。學習漸進增強的基礎知識。即使您選擇不將其用於您的完整應用程序，也仍然會有一些功能區域，在那裡它會變得非常寶貴。採用防禦性開發技術在使用最近的預寫模塊、庫或框架之前，請考慮一下這個問題。在開始之前，了解該技術的含義。框架應該提供瀏覽器支持列表，因為它們已在有限數量的應用程序中進行了測試。了解瀏覽器限制和怪癖。例如，如果您正在考慮使用SVG圖表，請注意它在IE9到11中可能看起來很奇怪，並且在IE8及以下版本中會失敗。這並不意味著必須在拒絕SVG或放棄IE支持之間做出二元選擇。總有一些折衷方案不會造成重大的開發工作。例如：- 接受SVG渲染很奇怪，但它仍然可用

只在IE中顯示數據表，或
提供IE用戶可以在其他地方打開的SVG下載。

儘早測試並經常測試您不可能測試每個設備，但只為一個瀏覽器開發是徒勞的。不斷在各種應用程序中測試您的項目。將測試留到最後將產生災難性的後果。我們很容易責怪工具和瀏覽器的不足，但如果儘早發現，大多數問題都可以在開發過程中得到糾正。這並不是說每種瀏覽器每次都必須以完全相同的方式運行。功能倒退是不可避免的。例如：- 漸進式Web應用程序在iPhone和iPad上無法離線工作——但在線操作正常。

IE不支持CSS Grid——但浮動、flexbox或全寬塊回退應該是可以接受的。
Firefox的桌面版不顯示日期字段的日曆——但用戶仍然可以輸入日期。

在您的開發PC上安裝一些瀏覽器。 Mac和Linux用戶可以在developer.microsoft.com/microsoft-edge/獲得Microsoft Edge和IE測試工具。對於Windows和Linux用戶來說，測試Safari比較困難；BrowserStack等在線測試服務是最簡單的選擇。現代瀏覽器具有出色的移動仿真功能，但可以使用一些真實的設備來了解在較慢的硬件和網絡上的觸摸控制和性能。在您的終端使用HTTPSWeb正在逐漸使HTTPS成為首選協議，並且這種趨勢將繼續下去。 Google Chrome甚至開始將非HTTPS網站標記為不安全，這是您將網站配置為使用HTTPS的一個很好的理由。例如，我們的Web託管合作夥伴SiteGround使他們的客戶可以輕鬆地遷移到HTTPS。為此，他們為所有新的WordPress帳戶自動安裝了Let's Encrypt SSL證書，對於現有帳戶，他們只需單擊一下即可切換到HTTPS。