如何使用JavaScript检测冷门浏览器（baidu）？

Question

我正在尝试通过提供两种样式使我的应用程序跨浏览器，一种用于支持 CSS 3d 动画的浏览器，一种用于不支持的浏览器，使用此代码来提供功能-检测：

// Function from: 
const isValueSupported = (prop, value) => {
  const el = document.createElement('div');
  el.style[prop] = value;
  return el.style[prop] === value;
}
// [unction from: http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/
const isPropertySupported = property =>  property in document.body.style;

// Detection style inspired by Modernizr library
if (isValueSupported('perspective', '400px') && isValueSupported('transform-style', 'preserve-3d') && isValueSupported('backface-visibility', 'hidden') && isValueSupported('transform', 'rotateY(-180deg)') && isPropertySupported('perspective') && isPropertySupported('transform-style') && isPropertySupported('backface-visibility') && isPropertySupported('transform') && (!navigator.userAgent.includes('Firefox'))) {
  document.documentElement.classList.add('csstransforms3d');
} else {
  document.documentElement.classList.add('no-csstransforms3d');
}

问题是，虽然有些浏览器，比如 Firefox，通过了测试，但是它们有一些已知的错误，比如 Mozilla's backface-visibility bug，所以我 不得不 browser-sniff :(.
我很快找到了适用于 Firefox 的有用结果：if (navigator.userAgent.includes('Firefox'))，但对于另一个浏览器，我的计算机上恰好有一个名为 "Baidu browser" 的浏览器，我找不到任何结果。
那么如何检测这些浏览器呢？

Answer 1

您可以使用以下代码检测 JavaScript 中流行的浏览器。

// Mobile Browsers
export const isMobile = () => {
  const ua = (navigator || {}).userAgent;
  if (ua) {
    return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(ua))
  }
  return false;
}

// Opera 8.0+
export const isOpera = () => {
  let opr = window.opr || {};
  return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
}

// Firefox 1.0+
export const isFirefox = () => typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
export const isSafari = () => {
  let safari = window.safari || {};
  return /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
}

// Internet Explorer 6-11
export const isIE = () => /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
export const isEdge = () => !isIE() && !!window.StyleMedia;

// Chrome 1+
export const isChrome = () => !!window.chrome && !!window.chrome.loadTimes;

因此，任何与这些流行浏览器不匹配的东西都将成为不受欢迎的浏览器。

如何使用JavaScript检测冷门浏览器（baidu）？

How to detect unpopular browsers (baidu) using JavaScript?

javascript

browser-detection