Как проверить реальную поддержку касания в браузере

Сегодня (или совсем недавно) Chrome Beta обновлен до 17 для меня, и с ним я заметил некоторую забаву в своем веб-приложении. Я заметил, что это связано с тем, что класс добавляется к элементу body, который обычно добавляется туда, если есть поддержка сенсорных событий, которую я проверяю следующим образом:

  try {  
    document.createEvent("TouchEvent");
    _device.touch = true;
  } catch (e) {
    _device.touch = false;
  }

И, конечно же, я могу создавать и запускать события касания на Chrome 17. Первая идея, которая у меня была, о, я могу проверить на ощупь и посмотреть, не получается ли щелчок мыши, поэтому есть мышь, но MouseEvents тоже запускается.

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

Ответы

Ответ 1

Try:

'ontouchstart' in document.documentElement

Ответ 2

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

Итак, это действительно связано с тем, почему вы хотите знать:

  • Вы хотите знать, будете ли вы получать события touchstart/touchmove/touchhend: Невозможно заранее знать это заранее. Например. пользователь может подключить сенсорный экран после загрузки вашей страницы. Если вас могут заинтересовать эти события, вы должны просто слушать их.

  • Вы хотите знать, должна ли отображаться "мобильная" версия вашего сайта Независимо от того, поддерживает ли пользователь сенсорная поддержка, это не правильный сигнал для этого - например. пользователь Windows с сенсорным экраном, вероятно, НЕ хочет ваш мобильный сайт. Вы можете использовать heurstics UserAgent, но, пожалуйста, дайте пользователю липкий способ переключения версий вашего сайта.

  • Вы хотите знать, нужно ли вам настраивать свой интерфейс, чтобы быть более дружественным для сенсорного ввода Например, возможно, некоторые кнопки должны быть больше, если пользователь, вероятно, будет использовать touch. В общем, лучше всего всегда разрабатывать несколько типов указателей - ведь у вас нет способа узнать предпочтения указателя пользователя, когда у них есть и сенсорный, и мышь. Но если вы действительно хотите использовать знания об оборудовании указателя, доступные в качестве подсказки для создания наилучшего компромисса между UI, то есть новые запросы к мультимедиа CSS, которые вы можете использовать:

Я добавил частичную поддержку Chrome для них в Chrome 21 (crbug.com/123062). Насколько мне известно, ни один другой браузер не поддерживает их.

Ответ 3

('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch

Ответ 4

просто, не надо. если вы правильно проектируете сайт, единственная действительная причина для его проверки - это не сенсорные браузеры, особенно старые браузеры, не допускают ошибок, и в зависимости от того, как вы реализовали сенсорные события, это может даже не быть проблемой ( они просто не будут срабатывать), однако при использовании библиотеки, такой как hammer.js, вам нужно создать экземпляр объекта hammer в более раннем браузере, таком как IE 8, который вызовет ошибку, простой способ обойти это просто этот код в операторах try и catch:

try {
 var Hammer = new HAMMER();
} catch (err) {
 'do what ever or do nothing, does not support touch or won't work at least anyway'
}

при этом это позволит продолжить выполнение всего кода JavaScript.