Наконец, лучшим решением на данный момент является использование "maxTouchPoints" обнаружения.В соответствии с рекомендациями MDN : https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#Mobile_Device_Detection проверка должна выглядеть следующим образом:
let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
let mQ = window.matchMedia && matchMedia("(pointer:coarse)");
if (mQ && mQ.media === "(pointer:coarse)") {
hasTouchScreen = !!mQ.matches;
} else if ('orientation' in window) {
hasTouchScreen = true; // deprecated, but good fallback
} else {
// Only as a last resort, fall back to user agent sniffing
let UA = navigator.userAgent;
hasTouchScreen = (
/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
);
}
}
Обратите внимание, что проверка Agent используется в качестве запасного решения.Но в этом примере он довольно неглубокий и должен быть улучшен.До этого я использовал хорошее решение из этого старого поста: Обнаружение мобильного браузера .Это пользовательское регулярное выражение от detectmobilebrowsers.com .Но это не охватывает все случаи, особенно новые (в моем случае Motorolla).Поэтому проверка агента, которую я использовал из mobile-detect.js: https://www.npmjs.com/package/mobile-detect. И теперь она выглядит великолепно и версия безопасна.
Окончательное решение выглядит следующим образом:
let MobileDetect = require('mobile-detect'),
let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
let mQ = window.matchMedia && matchMedia("(pointer:coarse)");
if (mQ && mQ.media === "(pointer:coarse)") {
hasTouchScreen = !!mQ.matches;
} else if ('orientation' in window) {
hasTouchScreen = true; // deprecated, but good fallback
} else {
// Only as a last resort, fall back to user agent sniffing
let md = new MobileDetect(window.navigator.userAgent);
hasTouchScreen = md.mobile() || md.phone() || md.tablet();
}
}