Обнаружение браузера JavaScript?

Question

Мне нужно добавить определенную поддержку сенсорных устройств в текущем проекте. Поскольку это первый раз, когда я должен сделать что-то подобное, я взглянул на код некоторых «хорошо сделанных» веб-сайтов, чтобы увидеть, как они это делают.

Одна страница делает что-то вроде этого:

if(document.querySelectorAll && (navigator.platform == "iPad" || navigator.platform.substring(0, 6) == "iPhone" || navigator.platform == "iPod" || navigator.userAgent.indexOf('Android') > -1)) {...}

я тестировал его на всех устройствах, у меня есть под рукой, и он работает, но, пожалуйста, скажите мне, это хорошо, чтобы сделать это таким образом? Есть ли «правильный» способ сделать это?

Я спрашиваю, потому что here Я читал, что следует избегать обнаружения браузера, вместо этого следует использовать обнаружение объекта. Теперь я вижу, что они также тестируют document.querySelectorAll, который является обнаружением объекта, поэтому, возможно, все, что приходит после него, - это просто какая-то система безопасности?

Answer 1

Код, который вы используете, очень чувствителен: любая простая вставка символов в начале приведет к сбою.

Вы могли бы заменить его чем-то вроде

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Mini/i.test(navigator.userAgent)) { ... 

Но вы должны знать, что обнаружение устройств опасно, поскольку они могут быть более разнообразными, что один думает: некоторые из них лучше процессора, доступ к сети или экран, чем некоторые настольные браузеры. Поэтому для большинства целей лучше определить нужные функции.

Это обнаружение может, на мой взгляд, использоваться для обнаружения сенсорных экранов, если вы планируете поддерживать свой сайт в зависимости от доступных устройств, но есть и другие решения, например библиотеки, такие как Modernizr или specific tests.

Answer 2

Следует избегать обнаружения браузера, да. Потому что браузер может измениться.

Сегодня, возможно, Google Chrome не поддерживает функцию. Но завтра Chrome следует обновить и поддержать.

Итак, если вы делаете что-то вроде if (!isGoogleChrome()), в тот момент, когда Chrome обновляется, вы должны обновить свой код.

Вы должны сделать обнаружение объектов. Например, если вы хотите, чтобы убедиться, что функция/объект здесь, просто проверить:

if (document.querySelectorAll !== undefined) { 
    //... 
} 

Вы также можете использовать http://modernizr.com/, он может обнаружить текущие функции браузера для вас.