Обнаружение устройств с сенсорным экраном с помощью JavaScript: методы и приемы

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

  1. Использование события touchstart. Этот метод включает проверку того, поддерживается ли устройством событие touchstart. События касания обычно поддерживаются на устройствах с сенсорным экраном, поэтому, проверив наличие этого события, вы можете сделать вывод, имеет ли устройство сенсорный экран или нет. Вот пример:
function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}
if (isTouchDevice()) {
  // Touch screen device
} else {
  // Non-touch screen device
}
  1. Использование API matchMedia. API matchMediaпозволяет проверять мультимедийные функции устройства, включая функцию hover, которая отличает между устройствами с поддержкой наведения (например, настольными компьютерами с мышью) и устройствами с сенсорным экраном. Вот пример:
var isTouchDevice = window.matchMedia('(hover: none)').matches;
if (isTouchDevice) {
  // Touch screen device
} else {
  // Non-touch screen device
}
  1. Использование свойства ontouchstart. Этот метод включает в себя непосредственную проверку свойства ontouchstartобъекта window. Если свойство существует, оно указывает на устройство с сенсорным экраном. Вот пример:
var isTouchDevice = 'ontouchstart' in window;
if (isTouchDevice) {
  // Touch screen device
} else {
  // Non-touch screen device
}

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