創建跨瀏覽器兼容的網站

已發表: 2023-02-12

儘管大多數人堅持使用單一瀏覽器，但桌面和移動設備都有數十種選擇。 理想情況下，無論您使用哪種瀏覽器，網站都能完美顯示。 然而，情況並非總是如此，這正是跨瀏覽器測試的用武之地。

通過全面的跨瀏覽器測試，您可以確保您的網站在所有流行選項中的外觀和行為都完美無缺。 這樣一來，無論您的訪問者使用的是 Chrome、Firefox、Opera 還是鮮為人知的選項（如 SeaMonkey），他們都會獲得同樣出色的體驗。

在本文中，我們將更多地討論跨瀏覽器測試的重要性。 然後我們將通過一些步驟來幫助您創建一個跨瀏覽器兼容的網站。 讓我們開始工作吧！

為什麼跨瀏覽器兼容性很重要？

大多數人使用眾所周知的瀏覽器，例如 Google Chrome、Safari、Firefox 和 Opera。 但是，可用的選項比您想像的要多得多。 這對消費者來說是好事，但對您來說問題是每個瀏覽器的構建方式都不同。 這意味著您的網站可能在 Chrome 上完美運行，但在 Firefox 上遇到問題（僅舉一個例子）。

根據我們的經驗，您在一種瀏覽器中看到但在另一種瀏覽器中看不到的大多數錯誤都是相對較小的問題。 您網站的某個特定元素可能看起來不應該，或者某個特定功能可能無法正常工作。 雖然這些問題可能很小，但如果您想為網站的所有訪問者提供相同的體驗，就需要解決這些問題。

理想情況下，您會希望將您的網站設計為從頭開始就跨瀏覽器兼容。 這樣，您就不會冒疏遠任何特定瀏覽器用戶的風險。 在接下來的幾節中，我們將向您展示如何做到這一點。

如何創建跨瀏覽器兼容的網站

創建跨瀏覽器兼容網站的想法聽起來可能令人望而生畏。 但是，幾個簡單的步驟可以大大有助於確保您的網站在大多數瀏覽器上都能完美運行。 讓我們談談那些是什麼！

第 1 步：為您的 HTML 文件設置“文檔類型”

當瀏覽器加載您的網站時，它必須確定您使用的是哪個版本的 HTML。 這很重要，因為不同版本的 HTML 包含不同的規則。

“文檔類型”是告訴瀏覽器的聲明：“嘿，這是我們要使用的 HTML 版本！” 這樣，瀏覽器就不必進行任何猜測，這可以減少用戶遇到的錯誤數量。

幸運的是，這一步非常簡單。 您所要做的就是將以下代碼片段添加到您的 HTML 文檔中：

 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
 “http://www.w3.org/TR/html4/strict.dtd”>

您會注意到，此代碼段適用於 HTML 4.01 版。 如果您想改用 HTML5，可以使用以下代碼：

 <!DOCTYPE html>

問題是一些瀏覽器仍然不能很好地支持 HTML5。 儘管有許多改進，但使用它會影響跨瀏覽器的兼容性，因此您需要權衡這一事實及其優點。

第 2 步：使用 CSS 重置規則

通常，CSS 是瀏覽器兼容性錯誤背後的罪魁禍首。 那是因為每個瀏覽器都有自己的一套 CSS 規則。 換句話說，您網站的 CSS 可能會根據訪問者使用的瀏覽器呈現不同。

解決此問題的一種方法是使用“CSS 重置”。 這些是您可以添加到網站的規則集，它們為 CSS 在瀏覽器中的工作方式設定了基準。

關於 CSS 重置，有多種選擇，但我們最喜歡的選擇之一是 Normalize.css，因為它非常全面。

您可以從其 GitHub 庫下載normalize.css文件，並將其用作網站 CSS 的起點。 這將幫助您最大限度地提高站點上的跨瀏覽器兼容性。

第 3 步：使用跨瀏覽器兼容的庫和框架

JavaScript 庫和廣泛的框架（例如 Foundation 和 Bootstrap）如今非常流行。 如果您打算使用這些元素來構建您的網站，您可以通過使用跨瀏覽器友好的選項來避免很多麻煩。

一些庫和框架是從頭開始開發的，可以與盡可能多的瀏覽器一起使用。 一般來說，大多數流行的框架——包括我們剛才提到的兩個——都是為了與盡可能多的瀏覽器兼容而構建的。

但是，為了安全起見，請務必檢查您打算使用的任何庫或框架的文檔。 在大多數情況下，您會很容易找到有關跨瀏覽器兼容性的信息。 例如，這是 Foundation 文檔中的兼容性頁面。

稍作研究將幫助您為所有訪問者提供令人驚嘆的體驗，而不僅僅是那些使用特定瀏覽器的訪問者。

跨瀏覽器測試

即使您已經努力創建一個跨瀏覽器兼容的網站，檢查並查看是否一切正常工作仍然是一個好主意。 這個過程相對簡單——你所要做的就是使用多個瀏覽器加載你的網站並檢查錯誤。

問題是那裡有很多瀏覽器。 為了涵蓋您的基礎，我們建議您根據市場份額關注前五個選項，它們是：

  1. 谷歌瀏覽器
  2. 蘋果瀏覽器
  3. 火狐
  4. UC瀏覽器
  5. 歌劇

你可能會注意到 Microsoft Edge 沒有出現在列表中。 現在它的市場份額相當小，但確保您的網站也能使用它仍然是一個很好的做法。

當然，在您的計算機上安裝五六個不同的瀏覽器可能會很痛苦。 這就是為什麼有很多服務可以讓您在線進行跨瀏覽器測試的原因。 這大大簡化了流程，所涉及的費用通常很少。

不要犧牲您的數字體驗

並非您網站的所有訪問者都會使用相同的瀏覽器。 這意味著如果您想確保每個用戶都能享受您的網站，則需要進行一些跨瀏覽器測試。

但是請記住——即使您的網站在所有瀏覽器上都能完美運行，如果您想提供最佳的數字體驗，您仍然需要使用高質量的虛擬主機。 使用 WP Engine，您可以獲得驚人的性能並獲得專家級支持，所以請查看我們的計劃！