Определить, имеет ли устройство клавиатуру или сенсорное устройство - PullRequest
Новая
       6

Определить, имеет ли устройство клавиатуру или сенсорное устройство

0 голосов
/ 28 ноября 2018

Что было бы лучшим решением для обнаружения, если пользователь находится на устройстве с клавиатурой с клавишами со стрелками и esc или на мобильном устройстве с сенсорным функционалом, например, смахиванием?

У меня есть галерея изображенийкоторые я хотел бы отобразить либо клавиши со стрелками, если они находятся на устройстве с клавиатурой.
Или, если они на мобильном устройстве, я хотел бы сказать им, чтобы провести пальцем влево или вправо.

Вот моя галерея: http://kiledesign.no/?side=Foto&vis=Galleri

Я изменил основной код для плагина галереи ( jQuery Gridder ), чтобы пользователь мог использовать клавиши со стрелками влево / вверх для предыдущего изображения и вправо/ вниз для следующего изображения.
Я также включил клавишу Esc, чтобы закрыть полный просмотр.

Кроме того, я добавил jquery mobile swipe влево (prev) / right (next).

Теперь я хотел бы найти способ определения того, какие советы представлять на основе какого устройства.

Я думал о css media query.Как min-width.
Но есть мини-компьютеры с довольно маленькими экранами, и есть планшеты или даже телефоны с довольно высоким разрешением ...
Так что я не думаю, что это надежное решение ....

Есть предложения?

1 Ответ

0 голосов
/ 28 ноября 2018

Вы можете использовать navigator.userAgent, чтобы проверить, является ли агент компьютером или мобильным, как это: 

var isMobile = /iPhone|iPad|iPod|Android...etc/i.test(navigator.userAgent);
if (isMobile) {
  /* Set your code here */
}

Также может обнаружить, если устройство имеет сенсорный экран или нет, как это: 

function is_touch_device() {
  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
  var mq = function(query) {
    return window.matchMedia(query).matches;
  }

  if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
    return true;
  }

  // include the 'heartz' as a way to have a non matching MQ to help terminate the join
  // https://git.io/vznFH
  var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
  return mq(query);
}

Эта вторая копия кода ответа от ссылка .

...