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

В Javascript / jQuery, как я могу определить, есть ли на клиентском устройстве мышь?

У меня есть сайт, который сместит небольшую информационную панель, когда пользователь наводит курсор мыши на элемент. Я использую jQuery.hoverIntent для обнаружения зависания, но это явно не работает на устройствах с сенсорным экраном, таких как iPhone / iPad / Android. Поэтому на этих устройствах я бы хотел вернуться, чтобы отобразить панель информации.

    +1 для совершения hover и click оба. Другим способом может быть использование запросов в формате CSS и использование некоторых стилей только для небольших экранов / мобильных устройств, которые, скорее всего, будут иметь функциональность touch / tap. Поэтому, если у вас есть определенные стили с помощью CSS, а из jQuery вы проверяете эти элементы для свойств стиля мобильного устройства, вы можете подключиться к ним, чтобы написать свой мобильный код.

    См. Здесь: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

     var isTouchDevice = 'ontouchstart' in document.documentElement; 

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

    Найдено тестирование для window.Touch не работает на 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, версия префикса Microsoft этого префикса (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, хром, Opera, андроид по умолчанию браузер и сафари на iphone … все позитивные …

    Кажется солидным для меня 🙂

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

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

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

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

    В jQuery Mobile вы можете просто:

     $.support.touch 

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

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

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

    // -> Начало: 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'; }); 

    // <- Конец: jQuery

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

    Учитывая только заголовок (и этот вопрос является главным результатом в Google для javascript detect touch screen для javascript detect touch screen ), ответ таков:

    Вы не можете и не должны.

    Позвольте мне подробно остановиться на этом: (1) нет единого, однозначного веб-API для обнаружения сенсорного экрана (например, обнаружения того, будут ли ваши пользователи использовать сенсорный экран, прежде чем они начнут использовать ваше приложение), ( 2) по существу невозможно определить с уверенностью, действительно ли ваши пользователи используют сенсорный экран или клавиатуру + мышь . Просто рассмотрите следующие устройства:

    • Сенсорное устройство (телефон или планшет), используемое с внешней клавиатурой USB + мышь
    • Портативный ноутбук с сенсорным экраном
    • Рабочий стол с (по крайней мере одним) сенсорным экраном

    Как вы узнаете, какое устройство ввода предпочитаете ваши пользователи в этих случаях? Конечно, браузеры могут предложить общий API-интерфейс предпочтений , но тогда, что должно помешать пользователям использовать свое устройство через сенсорный экран для всего, кроме вашего сайта / приложения? И наоборот?

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


    С учетом всех вещей у вас есть по существу два варианта:

    1. Либо предлагайте специальную версию вашего приложения на сенсорном экране (например, с помощью интегрированной настройки, как это делает Windows 10), или
    2. Адаптируйте свой интерфейс для сенсорной поддержки «на лету» (по сути, настройка сенсорного экрана с 1. сделана автоматически)

    Для последнего вы можете просто сделать:

     document.addEventListener("touchstart", function () { // Enable touch-screen support now. // This is where you make touch-only elements appear, or set your isTouch to 'true'. }); 

    Теперь, если вам абсолютно необходимо определить сенсорную поддержку при запуске, вам понадобится блокировка экрана и потребуется пользователю «щелкнуть или нажать, чтобы начать», или предложить им выбрать, хотите ли они использовать оптимизированную по касанию версию или Not (здесь можно использовать sniffing пользовательского агента, чтобы принять выбранный по умолчанию вариант).


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

    Если вы отчаянно ищете определение поддержки сенсорного экрана, я советую сначала просмотреть ваш UI и UX.

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

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

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

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