Как я могу проверить поддержку реального сенсорного в браузере - PullRequest
Новая
       19

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

20 голосов
/ 07 января 2012

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

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

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

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

Ответы [ 4 ]

30 голосов
/ 07 января 2012

Попробуйте: 

'ontouchstart' in document.documentElement
9 голосов
/ 06 сентября 2012

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

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

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

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

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

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

8 голосов
/ 01 декабря 2014 
('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch
0 голосов
/ 12 декабря 2014

легко, не надо.если вы разрабатываете сайт должным образом, единственная действительная причина для его тестирования - это то, что не сенсорные браузеры, особенно старые браузеры, не допускают ошибок, и в зависимости от того, как вы реализовали сенсорные события, это может даже не быть проблемой (они просто не будут запускаться), однако при использовании библиотеки, такой как 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 будет продолжаться.

...