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