JavaScript: определение сенсорного экрана устройства

Быстрый ответ

Перейдем непосредственно к коду:

const isTouchDevice = !!('ontouchstart' in window || navigator.maxTouchPoints);

Этот код проверяет событие ontouchstart и наличие сенсорных точек, выводя информацию о поддержке сенсорного ввода.

Путешествие сквозь браузерный лабиринт

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

Наследие Internet Explorer

Вспомним Internet Explorer – он использует msMaxTouchPoints вместо maxTouchPoints. Вот обновленный код с учетом этого:

const isTouchDevice = 'ontouchstart' in window || 
                      navigator.maxTouchPoints > 0 || 
                      navigator.msMaxTouchPoints > 0;

Подробнее об этом расскажет наш спикер на видео

Проверка 'pointer: coarse'

Современные браузеры поддерживают указательные события через API Pointer Events. Давайте увидим, как это делается:

const isTouchCapable = matchMedia('(pointer: coarse)').matches;

Магия Modernizr

Для более детального определения сенсорных возможностей хорошо подходит Modernizr:

if (Modernizr.touch) { 
    // Теперь можно организовывать события касания
}

Визуализация

Представьте объект window как мегаполис, а события касания – как его движение:

🕵️‍♂️ Объект window 🚦🔍 ontouchstart 🏢🔍 navigator.MaxTouchPoints 🌳🔍 navigator.msMaxTouchPoints

Каждый детектив (🔍) отлавливает сигналы (касания):

const touchDetected = 'ontouchstart' in window || window.TouchEvent;

Зачем нам нужно это определение?

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

Пользовательский опыт: адаптация под сенсорный ввод

Адаптируйте дизайн интерактивных элементов, таких как кнопки, меню и слайдеры, чтобы упростить сенсорное взаимодействие.

Сохранение и использование результатов: эффективно и быстро

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

Тестирование на различных устройствах: никогда не пропускайте этот шаг

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

Путь вперед

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

Освоение any-pointer

В мире, где сосуществуют различные типы ввода, учитывание всех вариантов – значит идти в ногу со временем:

const isPotentialTouch = matchMedia('(any-pointer: coarse)').matches;

Современное определение возможностей: за кулисами

Следите за работой профессионалов, таких как Стью Кокс и Патрик H. Лаук, чтобы оставаться в курсе последних тенденций.

Бережное использование библиотек

Золотое правило: включайте сторонние библиотеки только тогда, когда это действительно необходимо и превышает стандартные возможности JavaScript.

Полезные материалы

1. Touch events – MDN — Детальное руководство MDN по событиям касания в JavaScript.
2. Modernizr Documentation — Документация Modernizr по определению событий касания.
3. Touch/pointer events test results | Patrick H. Lauke — Исследование Патрика Лауке по определению событий касания и указателя.
4. Detecting touch screen devices with Javascript – Stack Overflow — Обсуждение на Stack Overflow о том, как определить поддержку сенсорного экрана с помощью JavaScript.
5. Can I use... Support tables for HTML5, CSS3, etc — Таблицы поддержки, демонстрирующие совместимость событий касания в различных браузерах.
6. Pointer Events — Официальная документация W3C по Pointer Events.
7. Touch Events — Спецификация W3C об интеракции с сенсорными интерфейсами.