Как проверить, что экран сенсорный и не используется мышь?

Question

[maxxiixx]

Как проверить, что страница открыта на мобильном устройстве или на планшете?
Как узнать, используется мышь или нет?

Answer 1

[Damir Makhmutov]

Проверить что страница открыта на мобильном устройстве - довольно просто:

isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };

usage:

if (isMobile.any()) {
    alert('is mobile !');
}

Проверить есть ли поддержка touch евентов тоже не сложно:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

Comments

[h8nor]

const supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

Answer 2

[maxaon]

В кратце - при косании сначала происходят тач события (touchstart...) потом клик. Подробно.
А зачем вам проверять где открыто? Проверяйте возможности modernizr.com. Если для статистики - проверяйте userAgent или wurfljs.com.

Comments

[maxxiixx]

@maxaon левая панель не должна открываться при движении мыши с нажатой кнопкой, только на тачскрине

[maxaon]

Посмотрите в сторону Hammer.JS

Answer 3

[RubaXa]

Можно проверить наличие поддержки touch-событий, но это не гарантирует отсутствие мыши или какого то другого источника «ввода». Юзер может пользоваться одновременно мышью и touch-экраном и это не редкость, как может показаться.