Определение наличия мыши и тача в браузере: API функции

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

Чтобы проверить поддержку устройства интерфейсом, основанным исключительно на сенсорном управлении, используйте JavaScript и его метод window.matchMedia в сочетании с медиа-запросами в CSS. Вот пример соответствующего кода:

if (window.matchMedia("(pointer: coarse)").matches) {
  // Устройство с сенсорным интерфейсом обнаружено.
} else {
  // Также возможно использование мыши.
}

Используя этот фрагмент кода, вы с легкостью определите устройства, оснащенные сенсорными экранами, которые могут реагировать на контакт с поверхностью размером не менее 1 мм — это типично для сенсорных экранов.

Разбор свойств устройства

Медиа-функции в CSS4

Функция pointer из стандарта CSS4 позволяет характеризовать наличие и уровень чувствительности указывающего устройства. Медиа-запрос (pointer: none) свидетельствует об отсутствии устройства типа мышь. Всегда учитывайте поддержку данных возможностей браузерами перед запуском продукта.

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

Гибкие устройства: сенсор и мышь

Некоторые устройства оборудованы и сенсорным экраном, и мышью. Слежение за событиями mousemove позволит вам отслеживать движения мыши. Подобно этому, для отслеживания сенсорных действий используйте touchstart и touchmove.

Первое взаимодействие

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

Использование JavaScript для выявления поддержки

Медиа-запросы в JavaScript

В JavaScript вы также можете определить поддержку сенсорного управления с помощью window.matchMedia:

const hasMouse = window.matchMedia("(pointer: fine)").matches;
const hasTouch = window.matchMedia("(pointer: coarse)").matches;

Различение мыши и сенсора

Реализация функций hasTouch() и hasMouse() упростит понимание кода и возможность его повторного использования. Опирайтесь на идентификацию возможностей устройства, а не браузера.

Отслеживание изменений

Написание функций listenHasTouchChanges(callback) и listenHasMouseChanges(callback) позволит следить за изменениями и делать интерфейс более адаптивным.

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

Меньше мыши, больше сенсорного управления:

Мир браузера:
|  Средставо перехода  |  Доступность  |
| ---------------------- | -------------- |
| Корабль (мышь)         | Не постоянно   |
| Подводная лодка (сенсор)| Всегда         |

Без мыши только сенсорное управление определит дальнейший путь.

Нет мыши: переключаемся на сенсор.

Стратегии и сложности

Проверка браузерной совместимости

Важно изучить документацию W3C. Обеспечьте кросс-браузерную совместимость, используя полифилы.

Проектирование для сенсорных устройств

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

Modernizr — ваш надежный помощник

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

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

1. События указателя – Веб API | MDN — Гид по событиям указателя.
2. Спецификация событий указателя — Документация событий указателя от W3C.
3. Результаты тестов на сенсорные/указательные события | Тесты и демонстрации Patrick H. Lauke — Сценарии тестирования и выводы.
4. GitHub – Modernizr/Modernizr — Библиотека для обнаружения функционала HTML5/CSS3.
5. Не судите сенсорные устройства по их размеру | CSS-Tricks — Советы по разработке для сенсорных устройств.
6. css – Как переключиться с :hover на касание/нажатие для мобильных устройств – Stack Overflow — Сравнение обработки сенсорных событий и кликов.
7. Подробное руководство по дизайну мобильных приложений — Smashing Magazine — Лучшие практики проектирования мобильных приложений.