HOWTO · JavaScript
在 JavaScript 中检测浏览器版本
在本文中，展示了如何在 JavaScript 中检测浏览器版本。
当今世界上有许多具有各种屏幕尺寸的设备。
但问题是并非所有设备都可以支持网站上实现的各种功能。
要检测浏览器版本和浏览器名称，我们可以使用 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 中检测浏览器版本的另一个选项
浏览器中的特征检测-
检测特定浏览器是否支持特定功能可能是一个更好的主意。并且根据它是否支持某个功能，你可以采取进一步的行动并相应地编写你的代码。
逐步开发网站-
遵循设计技术，你首先为具有较少功能的小型设备开发网站，然后在增加功能的同时向上移动。它被称为自下而上的方法。
为现代浏览器构建 -
开发一个具有现代浏览器所有功能的成熟网站，然后调整一些更改以使其在旧浏览器上得到支持。与渐进式或自下而上的方法相比，它可能难以实施且效果较差。
