您的網站應該支持哪些瀏覽器？

本文是與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。

您還沒有回答這個問題！

問題“您應該支持哪些瀏覽器？”已經變得過於嚴格。假設您的答案只是“Chrome”：- 它運行在哪些設備和操作系統上？

• 將支持哪些範圍的屏幕尺寸？
• 您指的是哪個版本？最新的？ Chrome 10及以上版本？
• 發布新版本的Chrome時會發生什麼？
• 當Chrome實際上成為您的應用程序的運行時時，其他瀏覽器會發生什麼？

對於面向客戶的項目，提供瀏覽器支持列表已經變得不切實際。最好的答案可能是：“我們將根據假定的用戶統計數據開發您的項目，然後根據預算和時間限制在盡可能多的設備、操作系統、瀏覽器和版本中進行測試”。即使那樣，您也會錯過首席執行官堅持使用的舊款Blackberry。為Web開發——而不是瀏覽器。

關於網站瀏覽器支持的常見問題解答 (FAQ)

網站應該支持哪些最流行的Web瀏覽器？

網站應該支持的最流行的Web瀏覽器包括Google Chrome、Mozilla Firefox、Safari、Microsoft Edge和Internet Explorer。這些瀏覽器涵蓋了絕大多數互聯網用戶。但是，網站應該支持的特定瀏覽器可能取決於網站的目標受眾及其首選瀏覽器。

如何確定我的網站應該支持哪些瀏覽器？

您可以通過分析網站的流量數據來確定網站應該支持哪些瀏覽器。這些數據可以顯示訪問者正在使用哪些瀏覽器。您還可以考慮目標受眾中最流行的瀏覽器。

為什麼支持多個瀏覽器很重要？

支持多個瀏覽器很重要，因為它可以確保盡可能多的用戶可以訪問您的網站。由於個人喜好、設備兼容性或其他因素，不同的用戶可能更喜歡不同的瀏覽器。通過支持多個瀏覽器，您可以為所有訪問者提供積極的用戶體驗。

如何測試我的網站與不同瀏覽器的兼容性？

您可以使用各種工具和服務來測試您的網站與不同瀏覽器的兼容性。這些工具可以模擬您的網站在不同瀏覽器上的外觀和功能，幫助您識別和修復任何兼容性問題。

支持舊版瀏覽器有哪些挑戰？

支持舊版瀏覽器可能具有挑戰性，因為它們可能不支持最新的Web技術。這可能會限制您可以在網站上提供的功能和功能。此外，維護與舊版瀏覽器的兼容性可能需要額外的時間和資源。

我應該多久更新一次瀏覽器支持策略？

您應該定期更新瀏覽器支持策略，以跟上瀏覽器使用和技術的變化。這可能每隔幾個月就要進行一次，具體取決於您所在行業和目標受眾的變化速度。

什麼是漸進增強，它與瀏覽器支持有何關係？

漸進增強是一種Web設計策略，它從基本功能開始，然後為支持它們的瀏覽器添加更高級的功能。這種方法確保您的網站可以被所有用戶訪問，無論其瀏覽器的功能如何。

移動瀏覽器支持與桌面瀏覽器支持有何不同？

移動瀏覽器支持與桌面瀏覽器支持在幾個方面有所不同。與桌面瀏覽器相比，移動瀏覽器通常具有不同的功能和限制。此外，移動用戶的需求和期望可能不同，這可能會影響您的支持策略。

一些常見的瀏覽器兼容性問題是什麼？如何解決這些問題？

常見的瀏覽器兼容性問題包括佈局問題、功能問題和性能差異。這些問題通常可以通過使用跨瀏覽器測試工具、遵循Web開發最佳實踐以及定期更新網站代碼來解決。

如何確保我的網站仍然可以被使用舊版瀏覽器的用戶訪問？

您可以通過使用漸進增強、提供網站的替代版本或提供鼓勵用戶更新瀏覽器的消息來確保您的網站仍然可以被使用舊版瀏覽器的用戶訪問。

以上是您的網站應該支持哪些瀏覽器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！