迹忆客 专注技术分享

当今世界上有许多具有各种屏幕尺寸的设备。

但问题是并非所有设备都可以支持网站上实现的各种功能。

要检测浏览器版本和浏览器名称，我们可以使用 JavaScript 中的 userAgent。

使用 userAgent 检测 JavaScript 中的浏览器版本

navigator 是窗口对象的属性。

要访问 userAgent，你可以使用 navigator.userAgent 或使用对象解构从导航器中获取 userAgent。

const {userAgent} = navigator
console.log(userAgent);

使用 includes 方法会将字符串作为参数返回。该字符串有助于检测浏览器，如下所示。

if (userAgent.includes('Firefox/')) {
  console.log(userAgent)
} else if (userAgent.includes('Edg/')) {
  console.log(userAgent)
} else if (userAgent.includes('Chrome/')) {
  console.log(userAgent)
} else if (userAgent.includes('Safari/')) {
  // Safari
}

输出：

//Mozilla Firefox
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0

//Microsoft Edge 
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36 Edg/98.0.1108.50

// Google Chrome
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36

浏览器版本及其名称出现在 userAgent 提供的字符串的末尾。

如果你想获取结尾部分，即浏览器版本和名称而不是整个字符串，你可以运行下面的代码。

if (userAgent.includes('Firefox/')) {
  console.log(`Firefox v${userAgent.split('Firefox/')[1]}`)
} else if (userAgent.includes('Edg/')) {
  console.log(`Edg v${userAgent.split('Edg/')[1]}`)
} else if (userAgent.includes('Chrome/')) {
  console.log(`Chrome v${userAgent.split('Chrome/')[1]}`)
} else if (userAgent.includes('Safari/')) {
  // Safari
}

输出：

//Mozilla Firefox
Firefox v98.0

//Microsoft Edge 
Edg v98.0.1108.50

// Google Chrome
Chrome v98.0.4758.102 Safari/537.36

所有浏览器都显示相同的输出。这是因为一切都是建立在 Chromium 上的。

在 JavaScript 中为什么应该避免浏览器版本检测

使用 userAgent 检测浏览器名称及其版本并不是一个好主意，因为它不是 100% 准确的。

每个浏览器都以不同的方式设置这些数据，并且所有浏览器都不遵循特定的标准。

在 JavaScript 中检测浏览器版本的另一个选项

浏览器中的特征检测-

检测特定浏览器是否支持特定功能可能是一个更好的主意。并且根据它是否支持某个功能，你可以采取进一步的行动并相应地编写你的代码。

逐步开发网站-

遵循设计技术，你首先为具有较少功能的小型设备开发网站，然后在增加功能的同时向上移动。它被称为自下而上的方法。

为现代浏览器构建 -

开发一个具有现代浏览器所有功能的成熟网站，然后调整一些更改以使其在旧浏览器上得到支持。与渐进式或自下而上的方法相比，它可能难以实施且效果较差。