Как обнаружить непопулярные браузеры (baidu) с помощью JavaScript?

Я пытаюсь сделать свое приложение кросс-браузерным, предоставляя два стиля: один для браузеров, поддерживающих 3D-анимацию CSS, и один для браузеров, которые этого не делают, используя этот код для обнаружения функций:

// Function from: https://stackoverflow.com/a/36191841/7982963
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, поэтому мне пришлось нюхать браузер :(.
Я быстро нашел полезные результаты для Firefox: if (navigator.userAgent.includes('Firefox')), но для другого браузера бывает, что я на моем компьютере под названием «Браузер Baidu», я не смог найти никаких результатов.
Так как же обнаружить такие браузеры?


javascript browser-detection
person Moaaz Bhnas    schedule 20.11.2018    source источник
comment
Вы пробовали использовать Modernizr для обнаружения функций? Обратите внимание, что старый браузер, скорее всего, не поддерживает const и определенно не поддерживает функции со стрелками.   -  person charlietfl    schedule 20.11.2018
comment
Не имеет прямого отношения: Остерегайтесь ответа, из которого вы выбрали свою функцию cssPropertySupported, пытаясь определить, поддерживает ли браузер конкретный блок CSS. Этот тест не будет выполнен для браузера, который вообще не поддерживает это свойство. Подробнее: может быть чище найти способ воспроизвести то, что вы делаете, в кросс-браузерном режиме, а не пытаться найти все те, у которых есть причуды, делающие это вашим текущим способом = › звучит как проблема X-Y для меня.   -  person Kaiido    schedule 20.11.2018
comment
Например, если вы пытаетесь заставить эту скрипку работать одинаково во всех браузерах, поддерживающих 3D-преобразования, просто добавьте transform: translate(0); к переднему элементу: jsfiddle.net/0nfbdrq1/show   -  person Kaiido    schedule 20.11.2018
comment
@charlietfl Да, я попробовал их «csstransforms3d», и это не исключило их.   -  person Moaaz Bhnas    schedule 20.11.2018
comment
@Kaiido Большое спасибо за важную информацию. Как вы сказали, безопаснее придерживаться решения, совместимого с кросс-браузером, но должен быть способ использовать новые функции CSS, не создавая проблем пользователям старых браузеров.   -  person Moaaz Bhnas    schedule 20.11.2018
comment
Я не могу взглянуть на Baidu, но разве у него не будет тех же проблем, что и у Chromium/Chrome, поскольку он основан на них?   -  person t.niese    schedule 20.11.2018
comment
@t.niese Понятия не имею :'D   -  person Moaaz Bhnas    schedule 20.11.2018
comment
@MoaazBhnas Я имею в виду, сталкиваетесь ли вы с проблемой, если относитесь к Baidu как к Chrome? Большинство непопулярных браузеров являются побочными продуктами Chromium, Firefox или WebKit, и с точки зрения рендеринга они ведут себя так же, как и их оригинал. Вы, скорее всего, хотите определить движок и его версию, а не браузер.   -  person t.niese    schedule 20.11.2018
comment
@t.niese Да, когда я искал об этом, я знал, что он основан на хроме, но ошибка не возникает в хроме.   -  person Moaaz Bhnas    schedule 20.11.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете обнаружить популярные браузеры в 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;

Таким образом, все, что не соответствует ни одному из этих популярных браузеров, будет непопулярным браузером.

person Dinesh Pandiyan    schedule 20.11.2018
comment
Умная техника. воспользуюсь попробую. - person Moaaz Bhnas; 20.11.2018
comment
Готово. Большое спасибо: D - person Moaaz Bhnas; 20.11.2018
comment
это не будет работать для chrome 71, так как !!window.chrome.webstore вернет false - person Iulius; 16.12.2018
comment
@lulius Спасибо, что указали на это. Я обновил ответ. - person Dinesh Pandiyan; 16.12.2018