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

Question

Ivan Gagarinov · Accepted Answer

Для определения наличия сенсорного экрана есть несколько способов.

Проверка через User Agent:

```javascript
function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}

if (isTouchDevice()) {
  console.log("Это сенсорное устройство.");
} else {
  console.log("Это не сенсорное устройство.");
}
```

Второй метод более надежен. Он проверяет наличие поддержки событий сенсорного взаимодействия:

- `ontouchstart` в объекте `window`: свойство, которое будет истинным, если браузер поддерживает касания.
- `navigator.maxTouchPoints`: возвращает максимальное количество сенсорных точек, которые поддерживает устройство.

```javascript
function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}

if (isTouchDevice()) {
  console.log("Это сенсорное устройство.");
} else {
  console.log("Это не сенсорное устройство.");
}
```

Можно также попробовать зарегистрировать события касания и посмотреть, обрабатываются ли они. Если события успешно обрабатываются, это может указывать на возможность сенсорного экрана:

```javascript
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 ? "Это сенсорное устройство." : "Это не сенсорное устройство.");
});
```

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

Ответы

Каталог