Обнаружение браузера - Мобильный против ПК

Question

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

У меня есть игровой сайт. Люди могут играть в игру на ПК или мобильном устройстве. Они также могут настроить, как они хотели бы, чтобы игра работала. Например, они могут сыграть в карты, щелкнув по ним один или два раза. Однако двойной щелчок не является опцией на мобильных устройствах, поэтому некоторые люди застревают, потому что выбирают эту опцию, а javascript не работает.

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

Итак, если я определяю особенности, что именно я обнаруживаю? Нет способа определить, поддерживает ли устройство двойной щелчок, не так ли?

Answer 1

Похоже, что вы действительно хотите сделать, это проверить поддержку касания, попробуйте Обнаружение касания: это "почему", а не "как".

Распространенное предложение:

if (document && document.element && 'ontouchstart' in document.documentElement) {
  ...
}

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

  /* Feature tests for TouchEvent and GestureEvent modules
   * implemented in Mobile Safari on iPhone
   *
   * The TouchEvent module is a draft (18/08/2008) that supports:
   *
   *   touchstart
   *   touchmove
   *   touchend
   *   touchcancel
   *
   * The GestureEvent module is a draft (18/08/2008)
   * that supports:
   *
   *   gesturestart
   *   gesturechange
   *   gestureend
   *
   * The functions require support for try..catch, introduced
   * in ECMA-262 ed3, JavaScript 1.4 and JScript 5.1.5010.
   * Equates to Navigator 4.0 or later and IE 5.1 or later
   * (http://pointedears.de/scripts/es-matrix/)
   *
   * If W3C DOM 2 Event document.createEvent is supported, 
   * return either true or false,
   * otherwise return undefined.
   */
   function touchSupported() {
     if (document && document.createEvent) {
       try {
         document.createEvent('TouchEvent');
         return true;
       } catch (e) {
         return false;
       }
     }
   }

   function gestureSupported() {
     if (document && document.createEvent) {
       try {
         document.createEvent('GestureEvent');
         return true;
       } catch (e) {
         return false;
       }
     }
   }

Он был написан в 2008 году, я действительно использовал его только в Safari и iPhone, хотя, похоже, он работает в других местах. Тест тщательно.

Answer 2

Вы никогда не сможете определить, где это ПК или мобильное устройство, которое эффективно обращается к вашему веб-сайту, потому что таких устройств очень много, и они постоянно меняются. Единственный способ сделать это - проверить строку агента браузера, что довольно утомительно; Есть тысячи этого. Кроме того, он может быть подделан, поэтому он не является хорошим источником информации. Лучшее, что вы можете сделать (это то, что делают многие профессионалы, в том числе и я), - это использовать методы обнаружения функций - разрешение экрана, поддерживаемые HTML-теги, поддерживаемые свойства CSS и т. Д.

Хорошим инструментом является библиотека Modenizr js, которая основана на функциях, и вы можете проверить, поддерживает ли устройство сенсорные события, если это так, то вы знаете, что двойной щелчок не будет для вас вариантом.

Вот ссылка на некоторую документацию http://modernizr.com/docs/