Обнаружение устройств с сенсорным экраном с помощью Javascript

var isTouchDevice = 'ontouchstart' in document.documentElement;

Примечание: просто потому, что устройство поддерживает сенсорные события не обязательно означает, что это исключительно устройство с сенсорным экраном. Многие устройства (например, мой Asus Zenbook) поддерживают события click и touch, даже если у них нет никаких реальных механизмов сенсорного ввода. При проектировании сенсорной поддержки всегда включайте поддержку событий click и никогда не предполагайте, что какое-либо устройство является исключительно одним или другим.

найдено тестирование для окна.Касание не работает на Android, но это:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

статьи: каков наилучший способ обнаружения устройства с сенсорным экраном с помощью JavaScript?

if ("ontouchstart" in window || navigator.msMaxTouchPoints)
        {
            isTouch = true;
        } else {
            isTouch = false;
        }

работает везде !!

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

причина использования maxTouchPoints вместе с msMaxTouchPoints:

Microsoft заявила, что начиная с Internet Explorer 11, Версия этого свойства с префиксом поставщика Майкрософт (msMaxTouchPoints) может быть удален и рекомендует использовать maxTouchPoints вместо этого.

Источник:http://ctrlq.org/code/19616-detect-touch-screen-javascript

Я использую:

if(jQuery.support.touch){
    alert('Touch enabled');
}

в jQuery mobile 1.0.1

Google Chrome, похоже, возвращает ложные срабатывания на этом:

var isTouch = 'ontouchstart' in document.documentElement;

Я полагаю, что это как-то связано с его способностью "эмулировать события касания" (F12 - > настройки в правом нижнем углу - > вкладка "переопределения" - > последний флажок). Я знаю, что он отключен по умолчанию, но именно с этим я связываю изменение результатов (метод "in", используемый для работы в Chrome). Однако, это, кажется, работает, насколько я проверил:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

все браузеры я запустил этот код по состоянию то typeof - это "объект", но я чувствую себя более уверенным, зная, что это все, но неопределенным :-)

протестировано на IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome для iPad 21.0.1180.80 и iPad Safari. Было бы здорово, если бы кто-то сделал еще несколько тестов и поделился результатами.

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

если вы используете jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

или просто чистый JS...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

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

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

работает на android Mozilla, chrome, Opera, Android браузер по умолчанию и safari на iphone... все позитивно ...

кажется твердым для меня :)

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

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

для моего первого сообщения / комментария: Мы все знаем, что "touchstart" запускается перед щелчком мыши. Мы также знаем, что когда пользователь откроет вашу страницу, он или она будет: 1) переместите мышь 2) Нажмите кнопку 3) коснитесь экрана (для прокрутки или ... :))

попробуем что-нибудь :

/ / --> Start: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

/ /

хорошего дня!

это работает для меня:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

в jQuery Mobile вы можете просто сделать:

$.support.touch

Не знаю, почему это так без документов.. но это crossbrowser safe (последние 2 версии текущих браузеров).

если вы используете 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, вы можете просто заменить

для разработки iPad я использую:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

затем я могу выборочно привязать к событиям на основе касания (например, ontouchstart) или событиям на основе мыши (например, onmousedown). Я еще не тестировал на android.