创建跨浏览器兼容的网站

已发表: 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，您可以获得惊人的性能并获得专家级支持，所以请查看我们的计划！