Как определить, является ли клиент сенсорным устройством

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

Я знаю, что есть такие вещи, какvar isiPad = navigator.userAgent.match(/iPad/i) != null;

но мне просто интересно, есть ли хитрость, чтобы вообще определить, находится ли пользователь на сенсорном устройстве? Потому что там намного больше сенсорных устройств и планшетов, чем просто iPad.

благодарю вас.

Источник

6 ответов

Решение

Вы можете использовать следующую функцию JS:

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
   return typeof el.ongesturestart === "function";
}

Источник: Обнаружение сенсорного просмотра.

Обратите внимание, что приведенный выше код проверяет, поддерживает ли сенсорный экран браузер, а не устройство.

Ссылки по теме:

Может быть обнаружение в jquery для мобильных и jtouch

Источник 
if ("ontouchstart" in document.documentElement)
{
  alert("It's a touch screen device.");
}
else
{
 alert("Others devices");
}

самый простой код, который я нашел после просмотра здесь и там

Источник

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

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}
Источник

С помощью document.createEvent("TouchEvent") не будет работать на десктоп-устройствах. Таким образом, вы можете использовать его внутри оператора if.

Обратите внимание, что этот метод может привести к ошибкам на не сенсорных устройствах. Я бы предпочел проверить ontouchstart в document.documentElement,

Источник

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

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}
Источник

Если вы используете Modernizr, он очень прост в использовании Modernizr.touch как уже упоминалось ранее.

Тем не менее, я предпочитаю использовать комбинацию Modernizr.touch и тестирование пользовательского агента, просто чтобы быть в безопасности.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Если вы не используете Modernizr, вы можете просто заменить Modernizr.touch функция выше с ('ontouchstart' in document.documentElement)

Также обратите внимание, что тестирование агента пользователя iemobile предоставит вам более широкий спектр обнаруженных мобильных устройств Microsoft, чем Windows Phone,

Также посмотрите этот ТАК вопрос

Источник
Другие вопросы по тегам