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

Нет, это невозможно. Превосходные ответы даны только частично, потому что любой данный метод будет давать ложные срабатывания и ложные отрицания. Даже браузер не всегда знает, присутствует ли сенсорный экран из-за API-интерфейсов ОС, и этот факт может измениться во время сеанса браузера, особенно в случае устройств типа KVM.

См. Дополнительную информацию в этой превосходной статье:

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

Статья предлагает вам пересмотреть предположения, которые заставляют вас хотеть обнаруживать сенсорные экраны, они, вероятно, ошибочны. (Я проверил свое приложение для своего приложения, и мои предположения были действительно неверны!)

В статье делается вывод:

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

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

Мы попробовали реализацию modernizr, но обнаружение сенсорных событий больше не является последовательным (IE 10 имеет сенсорные события на рабочем столе Windows, IE 11 работает, потому что упали сенсорные события и добавлен указатель api).

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

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

Это упрощенная версия нашего кода:

var isTouch = true;
window.addEventListener('mousemove', function mouseMoveDetector() {
    isTouch = false;
    window.removeEventListener('mousemove', mouseMoveDetector);
});

Поддерживаются все браузеры, кроме Firefox для настольных компьютеров всегда TRUE , потому что Firefox для настольных компьютеров поддерживает адаптивный дизайн для разработчиков, даже если вы нажмете сенсорную кнопку или нет!

Я надеюсь, что Mozilla исправит это в следующая версия.

Я использую рабочий стол Firefox 28.

function isTouch()
{
    return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}

Самая большая проблема с попыткой обнаружить касание - это гибридные устройства, которые поддерживают как сенсорное управление, так и трекпад / мышь. Даже если вы в состоянии правильно определить, поддерживает ли устройство пользователя касание, вам действительно нужно определить, какое устройство ввода пользователь в настоящее время использует. Здесь есть подробное описание этой проблемы и возможное решение здесь .

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

document.addEventListener('touchstart', functionref, false) // on user tap, "touchstart" fires first
document.addEventListener('mouseover', functionref, false) // followed by mouse event, ie: "mouseover"

Сенсорное действие вызовет оба этих события, хотя первое (touchstart) всегда будет первым на большинстве устройств. Таким образом, рассчитывая на эту предсказуемую последовательность событий, вы можете создать механизм, который динамически добавляет или удаляет класс can-touch к корню документа, чтобы отразить текущий тип ввода пользователя пользователя на данный момент в документе:

;(function(){
    var isTouch = false //var to indicate current input type (is touch versus no touch) 
    var isTouchTimer 
    var curRootClass = '' //var indicating current document root class ("can-touch" or "")
     
    function addtouchclass(e){
        clearTimeout(isTouchTimer)
        isTouch = true
        if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
            curRootClass = 'can-touch'
            document.documentElement.classList.add(curRootClass)
        }
        isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
    }
     
    function removetouchclass(e){
        if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
            isTouch = false
            curRootClass = ''
            document.documentElement.classList.remove('can-touch')
        }
    }
     
    document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
    document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})();

Подробнее здесь .

это так просто, если вы проверите, что сенсорный запуск поддерживается в document.documentElement

var x = 'touchstart' in document.documentElement;
console.log(x)
// return true if is supported
// else return false

jQuery v1.11.3

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

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

Помимо этого поста и Обнаружения устройств с сенсорным экраном с помощью Javascript , я нашел этот пост Патрика Лаука чрезвычайно полезным: https://hacks.mozilla.org/2013/04/ Обнаружение прикосновения, почему не «как» /

Вот код ...

$(document).ready(function() {
//The page is "ready" and the document can be manipulated.

    if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
    {
      //If the device is a touch capable device, then...
      $(document).on("touchstart", "a", function() {

        //Do something on tap.

      });
    }
    else
    {
      null;
    }
});

Важно! Метод *.on( events [, selector ] [, data ], handler ) должен иметь селектор, обычно элемент, который может обрабатывать событие «touchstart» или любое другое подобное событие, связанное с касаниями. В данном случае это элемент гиперссылки «а».

Теперь вам не нужно обрабатывать обычное нажатие мыши в JavaScript, потому что вы можете использовать CSS для обработки этих событий, используя селекторы для элемента «a» гиперссылки, например:

/* unvisited link */
a:link 
{

}

/* visited link */
a:visited 
{

}

/* mouse over link */
a:hover 
{

}

/* selected link */
a:active 
{

}

Примечание. : Есть и другие селекторы ...