在 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 中检测浏览器版本的另一个选项
浏览器中的特征检测-
检测特定浏览器是否支持特定功能可能是一个更好的主意。并且根据它是否支持某个功能，你可以采取进一步的行动并相应地编写你的代码。
逐步开发网站-
遵循设计技术，你首先为具有较少功能的小型设备开发网站，然后在增加功能的同时向上移动。它被称为自下而上的方法。
为现代浏览器构建 -
开发一个具有现代浏览器所有功能的成熟网站，然后调整一些更改以使其在旧浏览器上得到支持。与渐进式或自下而上的方法相比，它可能难以实施且效果较差。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn