Как обнаружить сенсорное устройство в 2019 году?
Для моего приложения мне нужно радикально изменить весь UX для сенсорных устройств с экранной клавиатурой (например, мобильный телефон, сенсорный телевизор) по сравнению с устройствами мыши/kbd (например, настольный компьютер, мобильный телефон с bluetooth-мышью/kbd).
NB. Я уже разобрался с адаптивным макетом с сеткой CSS и медиа-запросами, так что этот аспект решен. Моя проблема не в макете, а в том, что весь UX должен быть принципиально другим. Лучший вариант, который у меня есть на данный момент, это слушать движение мыши во всем окне просмотра.
Как я могу сделать это с помощью современных браузеров?
Примечание. Я уже прочитал существующие ответы, которым несколько лет, и в целом пришел к выводу, что это невозможно сделать.
точно. Так что я не столько хочу обнаружить прикосновение, сколько хочу обнаружить отсутствие мыши/клавиатуры. Размер экрана относительно не важен для моего приложения, а там, где он имеет значение, я покрываю его с помощью сетевых/медиа-запросов. Для моих целей что-то вроде флип-ноутбука, поддерживающего сенсорный/планшетный режим, является настольным компьютером. Если бы был способ определить, что пользователь переключил его в режим планшета, это было бы здорово.
Я нашел его полезным для обнаружения сенсорных устройств stackoverflow.com/a/4819886/9161843
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
В джаваскрипте.
if ("ontouchstart" in document.documentElement)
{
document.write("your device is a touch screen device.");
}
else
{
document.write("your device is NOT a touch device");
}
Как это идентифицирует сенсорные устройства, к которым подключены указывающие и клавиатурные устройства, по сравнению с теми, у которых их нет? Это то, что спрашивает ОП.
Вы можете определить, используя Javascript, используя простое условие здесь
if (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
//this is a touch device you can any action here
}else {
//it's not touch device another code here
}
Также по ссылке здесь https://ctrlq.org/code/19616-detect-touch-screen-javascript
На случай, если кто-то приземлится здесь в 2021 году: это navigator.maxTouchPoints, а не navigator.MaxTouchPoints.
Это действительно просто с помощью всего одной строки кода:
const touch = matchMedia('(hover: none)').matches;
- Какой? matchMedia?
- Это просто JS API для выполнения запросов CSS @media. И поддерживается в современных браузерах: https://caniuse.com/#feat=matchmedia. Конечно, вы можете использовать такие запросы прямо в CSS:
@media (hover: none){
/* touch stuff goes here */
}
- Хорошо, какие запросы @media могут быть также полезны?
@media (hover: none) and (pointer: coarse) {
/* touchscreens */
}
@media (hover: none) and (pointer: fine) {
/* stylus */
}
@media (hover: hover) and (pointer: coarse) {
/* controllers */
}
@media (hover: hover) and (pointer: fine) {
/* mouse or touchpad */
}
Но это будет запрашивать только основной метод ввода. Если вы хотите углубиться, вы можете использовать any-hover и any-pointer для запроса устройств ввода все.
UPD: убран хак для старых браузеров, похоже большинство старых браузеров не поддерживает hover и pointer медиазапросы. Вы можете использовать обнаружение сенсорных событий и сенсорные свойства navigator из других ответов.
UPD2: В вашем случае предпочтительнее использовать
const touch = matchMedia('(hover: none), (pointer: coarse)').matches;
Возможно, вам придется тщательно обдумать, что вы подразумеваете под «сенсорным устройством». Существует довольно много настольных компьютеров, поддерживающих сенсорный ввод, и, вероятно, их будет больше. Обычно пользовательские интерфейсы основаны на размере экрана, а сенсорная поддержка основана на обнаружении. Прикосновение связано с взаимодействием с пользователем и на самом деле не зависит от размера экрана.