как определить наличие сенсорного экрана устройства с помощью javascript
Ответы
Для определения наличия сенсорного экрана есть несколько способов.
Проверка через 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