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

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

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

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

спасибо.

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

Ответ 2

if ("ontouchstart" in document.documentElement)
{
  alert("It a touch screen device.");
}
else
{
 alert("Others devices");
}

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

Ответ 3

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

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

Ответ 4

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

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

Ответ 6

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

$(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();
}

Ответ 7

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

Плагин jQuery для мобильных веб-разработок на iPhone, Android, iPod Touch и других устройствах, ориентированных на будущее.

http://jqtouch.com/

Ответ 8

Если вы используете 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.

Также см. этот вопрос SO