как определить наличие сенсорного экрана устройства с помощью javascript

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
09 марта 2025

Для определения наличия сенсорного экрана есть несколько способов.

Проверка через User Agent:

function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}

if (isTouchDevice()) {
  console.log("Это сенсорное устройство.");
} else {
  console.log("Это не сенсорное устройство.");
}

Второй метод более надежен. Он проверяет наличие поддержки событий сенсорного взаимодействия:

  • ontouchstart в объекте window: свойство, которое будет истинным, если браузер поддерживает касания.
  • navigator.maxTouchPoints: возвращает максимальное количество сенсорных точек, которые поддерживает устройство.
function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}

if (isTouchDevice()) {
  console.log("Это сенсорное устройство.");
} else {
  console.log("Это не сенсорное устройство.");
}

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

function isTouchDevice(callback) {
  const testDiv = document.createElement('div');
  testDiv.style.position = 'absolute';
  testDiv.style.width = '100px';
  testDiv.style.height = '100px';
  testDiv.style.top = '-100px';
  testDiv.style.left = '-100px';

  testDiv.addEventListener('touchstart', function() {
    callback(true); // Если событие произошло, значит устройство сенсорное
  });

  document.body.appendChild(testDiv);
  testDiv.dispatchEvent(new Event('touchstart')); // Имитируем событие
  document.body.removeChild(testDiv);

  callback(false); // Если событие не произошло, значит устройство не сенсорное
}

isTouchDevice(function(isTouch) {
  console.log(isTouch ? "Это сенсорное устройство." : "Это не сенсорное устройство.");
});
0 0