Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?

Я написал плагин jQuery для использования как на настольных, так и на мобильных устройствах. Я задавался вопросом, есть ли способ с JavaScript, чтобы обнаружить, если устройство имеет возможность сенсорного экрана. Я использую jquery-mobile.js для обнаружения событий сенсорного экрана, и он работает на iOS, Android и т. Д., Но я также хотел бы написать условные операторы, основанные на том, имеет ли устройство пользователя сенсорный экран.

Это возможно?

381
задан 16.04.2020, 02:07

36 ответов

Обновление: прочитайте ответ blmstr ниже, прежде чем использовать целую библиотеку обнаружения объектов в своем проекте. Обнаружение фактической поддержки касания является более сложным, и Modernizr охватывает только базовый вариант использования.

Modernizr - отличный, легкий способ сделать все виды обнаружения функций на любом сайте.

Он просто добавляет классы к элементу html для каждой функции.

Затем вы можете легко настроить эти функции в CSS и JS. Например:

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

И Javascript (пример jQuery):

$('html.touch #popup').hide();
137
ответ дан 16.04.2020, 02:16
  • 1
    кто хочет держать пари, что joel записал ту страницу Википедии? ха-ха-ха jk. – Eric Belair 12.04.2020, 15:09
  • 2
    Обновление: blmstr' s ответ лучше, и чистое решение JavaScript. – Alan Christopher Thomas 16.04.2020, 02:17
  • 3
    можно также сделать тест JS для существования сенсорных событий, если (Modernizr.touch) {/* еще действительно касаются материала /} {/ прекрасный, don' t */} – Anatoly G 16.04.2020, 02:17
  • 4
    К @harrylove' s точка, так как Windows 8 вышел, Modernizr неправильно возвращал весь мой PC' s браузеры как совместимые с касанием. – Anton 16.04.2020, 02:17
  • 5
    Modernizr не тестирует на сенсорные экраны. Это тестирует на существование сенсорных событий в браузере. Посмотрите " Misc Tests" раздел в документах: modernizr.com/docs/#features-misc – Harry Love 16.04.2020, 02:18
var isTouchDevice =
    (('ontouchstart' in window) ||
    (navigator.MaxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
    /* Code for touch device /*
}else{
    /* Code for non touch device */
}

Веселись!

0
ответ дан 16.04.2020, 02:08
  • 1
    К сожалению, в iOS7, изменяющем tableView' s separatorInset не влияет на разделители вначале и конец каждого раздела. Они, кажется, постоянно заполняют ширину tableView. Изменение separatorInset только влияние средние разделители. – Tim Windsor Brown 13.04.2020, 05:46

Экстент jQuery support объект:

jQuery.support.touch = 'ontouchend' in document;

И теперь вы можете проверить его где угодно, например:

if( jQuery.support.touch )
   // do touch stuff
0
ответ дан 16.04.2020, 02:08
  • 1
    Работы над x64 Ubuntu. Дело в том, что const массивы/строки компилируются в .text сегменте в порядке быть достигнутыми с mov label[%rip], %rax парадигма, которая является самой короткой последовательностью машинного кода в x64 для загрузки 64-разрядной константы. – Aki Suihkonen 04.03.2020, 09:10

Это, кажется, работает хорошо для меня до сих пор:

//Checks if a touch screen
is_touch_screen = 'ontouchstart' in document.documentElement;

if (is_touch_screen) {
  // Do something if a touch screen
}
else {
  // Not a touch screen (i.e. desktop)
}
0
ответ дан 16.04.2020, 02:09
  • 1
    Прекрасный ответ. Мне только жаль, что это не было завершено это с некоторыми ссылками (например, о предотвращении выполнения данных). Только ради полноты. Поток reddit мог быть полезным. – emesx 04.03.2020, 09:11
$.support.touch ? "true" : "false";
0
ответ дан 16.04.2020, 02:09

это так просто, если вы проверите, что сенсорный запуск поддерживается в document.documentElement

var x = 'touchstart' in document.documentElement;
console.log(x)
// return true if is supported
// else return false
-1
ответ дан 16.04.2020, 02:10

Хотя это только альфа-версия, jquery mobile Framework стоит проверить. Это нормализует эти типы событий в мобильных браузерах. Возможно, посмотрите, что они делают. Я предполагаю, что jquery-mobile.js отличается от этого фреймворка.

-2
ответ дан 16.04.2020, 02:11
  • 1
    мобильный jQuery является большим, но и мы используем его для мобильной разработки, но я хотел быть в состоянии протестировать специально для устройств сенсорного экрана. Там didn' t, кажется, способ сделать это только с мобильным jQuery. – screenm0nkey 16.04.2020, 02:11
  • 2
    Право, это doesn' t прокладывают себе путь. Это использует прогрессивное улучшение. – ScottE 16.04.2020, 02:11
  • 3
    Спасибо! Это, что я хотел услышать, довольный знать I' m не от курса все же. – user1547129 05.05.2020, 00:33

этот способ работает для меня, он ждет первого взаимодействия с пользователем, чтобы убедиться, что они на сенсорных устройствах

var touchEnabled = false;
$(document.body).one('touchstart',
    function(e){
        touchEnabled=true;
        $(document.documentElement).addClass("touch");
        // other touch related init 
        //
    }
);
-3
ответ дан 16.04.2020, 02:11
  • 1
    @user1547129: Это будет раздражающим, но возможно стоить того для предотвращения родительских указателей, если Вы можете. Я don' t думают, что Вам действительно будут нужны они на данном этапе, но they' ll вызывают головную боль, когда Вы хотите переместить деревья и иметь, чтобы расцепить и повторно связать их. – Mehrdad 05.05.2020, 00:33

Поддерживаются все браузеры, кроме Firefox для настольных компьютеров всегда TRUE , потому что Firefox для настольных компьютеров поддерживает адаптивный дизайн для разработчиков, даже если вы нажмете сенсорную кнопку или нет!

Я надеюсь, что Mozilla исправит это в следующая версия.

Я использую рабочий стол Firefox 28.

function isTouch()
{
    return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}
1
ответ дан 16.04.2020, 02:11
  • 1
    @Mehrdad: Все структуры данных являются раздражающими, потому что Вы имеете, удостоверяются, что они (и их инварианты) остаются в курсе. You' ve указал на компромисс между поддержанием родительских указателей и кодированием кэшей родительского списка, чтобы позволить Вам, обход создает резервную копию дерева когда Вы don' t имеют родительские ссылки. (Я лично предпочитаю родительские ссылки; большая часть кода, включающего дерево, осмотр это, и это должно быть самым легким записать. [Отметьте: Я создаю инструменты, которые делают крупные древовидные преобразования].). YMMV. – Ira Baxter 05.05.2020, 00:34

Если вы используете Modernizr , очень просто использовать Modernizr.touch, как упоминалось ранее.

Однако я предпочитаю использовать комбинацию Modernizr.touch и тестирование пользовательского агента, просто чтобы быть в безопасности.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Если вы не используете Modernizr, вы можете просто заменить приведенную выше функцию Modernizr.touch на ('ontouchstart' in document.documentElement)

Также обратите внимание, что тестирование пользовательского агента iemobile даст вам более широкий диапазон обнаружил мобильные устройства Microsoft, чем Windows Phone.

Также см. Этот вопрос SO

17
ответ дан 16.04.2020, 02:12
  • 1
    @PeterOlson Так what' s точка в наличии CallSignatures в интерфейсных определениях вообще? – Valentin 07.10.2012, 21:25

Вы можете установить модернизатор и использовать простое сенсорное событие. Это очень эффективно и работает на каждом устройстве, на котором я его тестировал, включая поверхность Windows!

Я создал jsFiddle

function isTouchDevice(){
    if(Modernizr.hasEvent('touchstart') || navigator.userAgent.search(/Touch/i) != -1){
         alert("is touch");
            return true;
         }else{
            alert("is not touch");
            return false;
    }
}
1
ответ дан 16.04.2020, 02:13
  • 1
    во время этой записи существует другая страница Википедии EBS: en.wikipedia.org/wiki/Evidence-based_Scheduling – matt wilkie 12.04.2020, 15:10
  • 2
    Добро пожаловать в ТАК! Код отдельно (как непрокомментированный код) редко составляет ответ. Вы могли улучшить этот ответ путем добавления объяснения отрывка. – ebarr 16.04.2020, 02:13

Краткое примечание для тех, у кого может возникнуть желание написать window.ontouchstart !== undefined ->, пожалуйста, используйте micnic ответ, поскольку undefined не является ключевым словом в JavaScript. Большая проблема, если разработка пишет что-то вроде:

undefined = window.ontouchstart;

Разработчик может сделать неопределенным все, что он хочет, и вы также можете проверить, если window.ontouchstart = myNonExistingWord;

Нет неуважения к тем, кто дал этот ответ: Я уверен, что я написал это и в моем коде;)

0
ответ дан 16.04.2020, 02:13
  • 1
    Это - хорошее решение, но я предпочитаю просто скрывать разделители по умолчанию и добавлять представление на 1 пкс к нижней части моих ячеек таблицы. – Sulthan 13.04.2020, 05:47

Вы можете использовать следующий код:

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
   return typeof el.ongesturestart === "function";
}

Источник: Обнаружение сенсорного просмотра и @mplungjan post .

Вышеупомянутое решение было основано на обнаружении поддержки событий без перехвата браузера статья.

Вы можете проверить результаты на следующей тестовой странице .

Обратите внимание, что приведенный выше код проверяет только наличие поддержки сенсорного экрана в браузере, а не на устройстве. Так что если у вас ноутбук с сенсорным экраном, ваш браузер может не иметь поддержки сенсорных событий. Недавний Chrome поддерживает сенсорные события , но другой браузер может этого не делать.

Вы также можете попробовать:

if (document.documentElement.ontouchmove) {
  // ...
}

, но это может не работать на устройствах iPhone.

0
ответ дан 16.04.2020, 02:13
  • 1
    Кажется эти viewForFooterInSection, является на самом деле ненужным. Возврат.01f как heightForFooterInSection, кажется, добивается цели. Более повисший разделитель! – Nuthatch 13.04.2020, 05:48

Многие из них работают, но либо требуют jQuery, либо строчки javascript жалуются на синтаксис. Учитывая, что ваш первоначальный вопрос требует "JavaScript" (не jQuery, не Modernizr) способа решения этой проблемы, вот простая функция, которая работает каждый раз. Это также как можно меньше.

function isTouchDevice() {
    return !!window.ontouchstart;
}

console.log(isTouchDevice());

Еще одно преимущество, которое я упомяну, заключается в том, что этот код не зависит от инфраструктуры и устройств. Наслаждайтесь!

2
ответ дан 16.04.2020, 02:14
  • 1
    В приложении слоя n-типа необходимо повторно отобразить результаты EF в некоторые другие классы (DTO или собственный ПОСТЕПЕННО или что-то еще) потому что уровень представления doesn' t знают об уровне доступа к данным, таким образом, Вы haven' t это довольно удобные автоматически сгенерированные классы в Вашем view564model. И that' s, почему я сделал предположение этим, когда Вы называете DbSet< > это выполняет вызов к DB с некоторым запросом, и я сомневаюсь относительно этого it' s оптимизированный сервером как, например, SP. Следующий ef получает результат, и выполните отображение в автоматически сгенерированный класс. Вы получаете этот результат в своем слое бизнес-логики, фильтруете его в некотором роде (использующий linq.Where, например)... – Crossman 15.05.2020, 21:13

Этот работает хорошо даже в планшетах Windows Surface !!!

function detectTouchSupport {
msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
touchSupport = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch &&     document instanceof DocumentTouch);
if(touchSupport) {
    $("html").addClass("ci_touch");
}
else {
    $("html").addClass("ci_no_touch");
}
}
6
ответ дан 16.04.2020, 02:15
  • 1
    @Dietrich: Вещи как fork не могут быть реализованы без некоторой формы виртуальной памяти. Существует подмножество POSIX, который реализуем на non-MMU машинах, но для полностью соответствующей реализации нужен тот. – Billy ONeal 24.11.2019, 05:47

Мне нравится этот:

function isTouchDevice(){
    return typeof window.ontouchstart !== 'undefined';
}

alert(isTouchDevice());
20
ответ дан 16.04.2020, 02:15
  • 1
    @kahoon я предположил, что OP желала, чтобы конструктор был функцией, возвратив строку. – Peter Olson 07.10.2012, 19:49
  • 2
    Вы могли также просто использовать: var isTouch = 'ontouchstart' in window;, однако это не работает с последним Chrome (v31), var isTouch = 'createTouch' in window.document; все еще работает. – Olivier 16.04.2020, 02:16
  • 3
    Как уже упомянуто в комментариях ранее принятого вопроса. " Modernizr не тестирует на сенсорные экраны. Это тестирует на существование сенсорных событий в browser". Ваша функция технически hasTouchEvents () не isTouchDevice () – hexalys 16.04.2020, 02:16
  • 4
    Обратите внимание, что похожие методы, тестирующие [только 110], не распознают Поверхность как сенсорное устройство, потому что IE использует pointer события вместо этого. – CookieMonster 16.04.2020, 02:17
  • 5
    Нет никакой потребности использовать троичное выражение для возврата булевской переменной. Просто используйте выражение для возврата булевской переменной. function isTouchDevice(){ return (window.ontouchstart !== undefined); } – Tim Vermaelen 16.04.2020, 02:17

Я также много боролся с различными вариантами того, как определить в Javascript, отображается ли страница на устройстве с сенсорным экраном или нет. ИМО, на данный момент не существует никакой реальной возможности правильно ее определить. Браузеры либо сообщают о событиях касания на настольных компьютерах (поскольку ОС может быть готова к касанию), либо некоторые решения работают не на всех мобильных устройствах.

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

Мое решение заключалось в рефакторинге вида, чтобы не требовалось всплывающей подсказки над кнопкой, и в итоге мне не нужно было обнаруживать сенсорное устройство из Javascript с помощью методов, которые все имеют их недостатки .

1
ответ дан 16.04.2020, 02:17
  • 1
    Статья Wikipedia была удалена и перенаправлена к FogBugz: " отдельная статья Evidence Based Scheduling была быстро удалена как реклама " – Christian Davén 12.04.2020, 15:09

Практическим ответом является тот, который учитывает контекст:

1) Публичный сайт (без входа в систему)
Код пользовательского интерфейса для совместной работы с обоими параметрами .

2) Сайт входа
Захватите, произошло ли движение мыши в форме входа, и сохраните это в скрытом вводе. Значение передается с учетными данными для входа в систему и добавляется в сеанс пользователя , поэтому его можно использовать на время сеанса.

Jquery для добавления только на страницу входа:

$('#istouch').val(1); // <-- value will be submitted with login form

if (window.addEventListener) {
    window.addEventListener('mousemove', function mouseMoveListener(){
        // Update hidden input value to false, and stop listening
        $('#istouch').val(0); 
        window.removeEventListener('mousemove', mouseMoveListener);
    });
} 

(от + 1 до @Dave Burt и от +1 до @Martin Lantzsch в ответах)

1
ответ дан 16.04.2020, 02:17
  • 1
    В эру MS-DOS я предполагаю, было возможно записать работу char main=0xc3; – Aki Suihkonen 04.03.2020, 09:09

jQuery v1.11.3

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

  1. Определить, что используемое устройство является устройством типа сенсорного экрана.
  2. Обнаружить, что устройство было прослушено.

Помимо этого поста и Обнаружения устройств с сенсорным экраном с помощью Javascript , я нашел этот пост Патрика Лаука чрезвычайно полезным: https://hacks.mozilla.org/2013/04/ Обнаружение прикосновения, почему не «как» /

Вот код ...

$(document).ready(function() {
//The page is "ready" and the document can be manipulated.

    if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
    {
      //If the device is a touch capable device, then...
      $(document).on("touchstart", "a", function() {

        //Do something on tap.

      });
    }
    else
    {
      null;
    }
});

Важно! Метод *.on( events [, selector ] [, data ], handler ) должен иметь селектор, обычно элемент, который может обрабатывать событие «touchstart» или любое другое подобное событие, связанное с касаниями. В данном случае это элемент гиперссылки «а».

Теперь вам не нужно обрабатывать обычное нажатие мыши в JavaScript, потому что вы можете использовать CSS для обработки этих событий, используя селекторы для элемента «a» гиперссылки, например:

/* unvisited link */
a:link 
{

}

/* visited link */
a:visited 
{

}

/* mouse over link */
a:hover 
{

}

/* selected link */
a:active 
{

}

Примечание. : Есть и другие селекторы ...

1
ответ дан 16.04.2020, 02:18

Проблема

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

Сенсорные устройства также запускают mousemove при нажатии.

Решение

  1. Предположим, что прикосновение ложно при нагрузке.
  2. Подождите, пока не сработает событие touchstart, затем установите для него значение true.
  3. Если сенсорный запуск был запущен, добавьте обработчик перемещения мыши.
  4. Если время между двумя событиями перемещения мыши было менее 20 мс, предположим, что они используют мышь в качестве входных данных. Удалите событие, так как оно больше не нужно, и mousemove - дорогостоящее событие для мышиных устройств.
  5. Как только сенсорный запуск запускается снова (пользователь вернулся к использованию сенсорного ввода), для переменной устанавливается значение true. И повторите процесс, чтобы он определялся динамично. Если каким-то чудом мышиный ход сработал дважды при прикосновении до абсурда быстро (в моем тестировании это практически невозможно сделать в течение 20 мс), следующий сенсорный запуск вернет его к истине.

Протестировано на Safari iOS и Chrome для Android.

Примечание: не уверен на 100% в событиях указателя для MS Surface и т. Д.

Демонстрация Codepen

<час>
const supportsTouch = 'ontouchstart' in window;
let isUsingTouch = false;

// `touchstart`, `pointerdown`
const touchHandler = () => {
  isUsingTouch = true;
  document.addEventListener('mousemove', mousemoveHandler);
};

// use a simple closure to store previous time as internal state
const mousemoveHandler = (() => {
  let time;

  return () => {
    const now = performance.now();

    if (now - time < 20) {
      isUsingTouch = false;
      document.removeEventListener('mousemove', mousemoveHandler);
    }

    time = now;
  }
})();

// add listeners
if (supportsTouch) {
  document.addEventListener('touchstart', touchHandler);
} else if (navigator.maxTouchPoints || navigator.msMaxTouchPoints) {
  document.addEventListener('pointerdown', touchHandler);
}
1
ответ дан 16.04.2020, 02:18

Когда мышь присоединена, можно предположить с довольно высокой скоростью (я бы сказал, практически 100%), что пользователь перемещает мышь по крайней мере на небольшое расстояние после того, как страница готова - без какого-либо щелчка. Механизм ниже обнаруживает это. В случае обнаружения я рассматриваю это как признак отсутствия поддержки касания или, если поддерживается, незначительной важности при использовании мыши. Предполагается, что сенсорное устройство не обнаружено.

РЕДАКТИРОВАТЬ Этот подход может не подходить для всех целей. Он может использоваться для управления функциональностью, которая активируется на основе взаимодействия с пользователем на загруженной странице, например, в программе просмотра изображений. Приведенный ниже код также оставит событие mousemove привязанным к устройствам без мыши, как сейчас. Другие подходы могут быть лучше.

Грубо говоря, это выглядит так (извините за jQuery, но похоже на чистый Javascript):

var mousedown, first, second = false;
var ticks = 10;
$(document).on('mousemove', (function(e) {
    if(UI.mousechecked) return;
    if(!first) {
        first = e.pageX;
        return;
        }
    if(!second && ticks-- === 0) {
        second = e.pageX;
        $(document).off('mousemove'); // or bind it to somewhat else
        }
    if(first  && second  && first !== second && !mousedown){
        // set whatever flags you want
        UI.hasmouse = true;
        UI.touch = false;
        UI.mousechecked = true;
    }

    return;
}));
$(document).one('mousedown', (function(e) {
    mousedown = true;
    return;
}));
$(document).one('mouseup', (function(e) {
    mousedown = false;
    return;
}));
0
ответ дан 16.04.2020, 02:19
  • 1
    У меня есть та же ситуация, и она работает, пока я не касаюсь на последней ячейке. После касания последний разделитель является снова полной шириной и изменением его в коде [self.tableView setSeparatorInset:UIEdgeInsetsMake(0, 15, 0, 0)] didn' t справка. Какое-либо решение? – lvp 13.04.2020, 05:48
var isTouchScreen = 'createTouch' in document;

или

var isTouchScreen = 'createTouch' in document || screen.width <= 699 || 
    ua.match(/(iPhone|iPod|iPad)/) || ua.match(/BlackBerry/) || 
    ua.match(/Android/);

было бы более тщательной проверкой, я полагаю.

1
ответ дан 16.04.2020, 02:19
  • 1
    Было бы хорошо отметить, что ua относится к navigator.userAgent. Также обнаружение экраном width может дать ложный результат, если кто-то открывает браузер в не полноэкранный режим. – HoLyVieR 16.04.2020, 02:20
  • 2
    Если Вы решаете ступить вне чистой процедурной парадигмы для создания анализа или инструментов переводчика, можно также использовать механизмы преобразования программы, которые позволяют Вам определять поверхностные шаблоны синтаксиса интереса, которые неявно представляют древовидные фрагменты. Думайте о пользовательском DSL для выражения исходных шаблонов. Его удивительное, сколько неприглядной древовидной детали можно скрыть этот путь. См. en.wikipedia.org/wiki/Program_transformation – Ira Baxter 05.05.2020, 00:34

Я использую:

if(jQuery.support.touch){
    alert('Touch enabled');
}

в jQuery mobile 1.0.1

1
ответ дан 16.04.2020, 02:20

Есть что-то лучше, чем проверить, есть ли у них сенсорный экран, это проверить, используют ли они его, плюс это легче проверить.

if (window.addEventListener) {
    var once = false;
    window.addEventListener('touchstart', function(){
        if (!once) {
            once = true;
            // Do what you need for touch-screens only
        }
    });
}
9
ответ дан 16.04.2020, 02:21

Используя все комментарии выше, я собрал следующий код, который работает для моих нужд:

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));

Я протестировал это на iPad, Android (браузер и Chrome), Blackberry Playbook, iPhone 4s , Windows Phone 8, IE 10, IE 8, IE 10 (Windows 8 с сенсорным экраном), Opera, Chrome и Firefox.

В настоящее время происходит сбой на Windows Phone 7, и я пока не смог найти решение для этого браузера.

Надеюсь, кто-то найдет это полезным.

34
ответ дан 16.04.2020, 02:22
  • 1
    Почему не var MyType : MyInterface = function() { return "hello";}; тогда? Я думаю OP' S-интерфейс на самом деле говорит, что лицо, осуществляющее внедрение должно быть функцией. – Attila Kun 07.10.2012, 19:09
  • 2
    Есть ли любая причина Вы can' t использование: функционируйте is_touch_device () {возврат!! (' ontouchstart' в окне) ||!! (' msmaxtouchpoints' в навигаторе);}; – sidonaldson 16.04.2020, 02:22
  • 3
    использование функции будет работать, но мне обычно нравится использовать переменный метод выше так, это только тестируется однажды и быстрее, когда я проверяю позже в свой код. Также я нашел, что должен был протестировать, чтобы видеть, был ли msMaxTouchPoints больше чем 0, когда IE 10 в Windows 8 без сенсорного экрана возвращался 0 как msMaxTouchPoints. – David 16.04.2020, 02:23

Мы попробовали реализацию modernizr, но обнаружение сенсорных событий больше не является последовательным (IE 10 имеет сенсорные события на рабочем столе Windows, IE 11 работает, потому что упали сенсорные события и добавлен указатель api).

Поэтому мы решили оптимизировать веб-сайт как сенсорный, поскольку мы не знаем, какой тип ввода имеет пользователь. Это более надежно, чем любое другое решение.

Наши исследования говорят, что большинство пользователей настольных компьютеров перемещают курсор мыши по экрану, прежде чем щелкнуть, поэтому мы можем обнаружить их и изменить поведение, прежде чем они смогут что-либо щелкнуть или навести курсор.

Это упрощенная версия нашего кода:

var isTouch = true;
window.addEventListener('mousemove', function mouseMoveDetector() {
    isTouch = false;
    window.removeEventListener('mousemove', mouseMoveDetector);
});
14
ответ дан 16.04.2020, 02:22
  • 1
    @valentin у Вас может быть интерфейс для больше, чем просто классов – Peter Olson 08.10.2012, 02:44

Рабочая скрипка

Я добился этого вот так;

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

if(isTouchDevice()===true) {
    alert('Touch Device'); //your logic for touch device
}
else {
    alert('Not a Touch Device'); //your logic for non touch device
}
9
ответ дан 16.04.2020, 02:23
  • 1
    На самом деле Вы don' t neet для создания такого сложного объявления:-) я подразумеваю, что вложенная анонимная функция не необходима в этом случае. –  30.10.2012, 13:20

Поскольку Modernizr не обнаруживает IE10 в Windows Phone 8 / WinRT, простое кросс-браузерное решение выглядит следующим образом:

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

Вам нужно проверять только один раз, так как устройство не будет внезапно поддерживать или не поддерживает касание, поэтому просто сохраните его в переменной, чтобы вы могли использовать его несколько раз более эффективно.

118
ответ дан 16.04.2020, 02:24
  • 1
    Даже предложение GFoleys ' ontouchstart' в окне ||!! (navigator.msMaxTouchPoints); падения возвратов, положительные в феврале 2014 Chrome 30 dev. – Tom Andersen 16.04.2020, 02:24
  • 2
    ' onmsgesturechange' в окне также обнаруживает " desktop" IE10 на несенсорных устройствах, таким образом, это не надежный метод определения касания. – Matt Stow 16.04.2020, 02:25
  • 3
    Этот ответ должен был быть принят, так как это - лучшее и самое простое и актуальное. В функции я полагаю, что это было бы более последовательно: return !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator); (для объединения обоих ответов) Хорошо работает в IE10 также! – Yeti 16.04.2020, 02:25
  • 4
    Все Вам нужно: function isTouchDevice() { return 'ontouchstart' in window || !!(navigator.msMaxTouchPoints);} – GFoley83 16.04.2020, 02:25
  • 5
    Это должно быть принятым ответом. 'onmsgesturechange' in window возвращает true на рабочем столе IE10, даже когда касание возможно – Sam Thornton 16.04.2020, 02:26
  • 6
    ... и повторно отобразитесь в своем объекте персистентности. Тогда Вы делаете те же операции на этом, возражает, и отправьте конечный результат в уровень представления. Так i' m сообщение Вам, что эта операция уменьшает ef полноценность. Например, у Вас есть записи таблицы 100 000, и Вы загружаетесь, все это записывает, и сделайте все шаги, которые я описал. – Crossman 15.05.2020, 21:14

С момента появления интерактивных медиа-функций вы просто можете сделать:

if(window.matchMedia("(any-pointer: coarse)").matches) {
    // touchscreen
}

https://www.w3.org/TR / mediaqueries-4 / # descdef-медиа-любой-указатель

12
ответ дан 16.04.2020, 02:24
  • 1
    EF выбирает только необходимые записи, и запросы преобразовываются в надлежащие SQL-операторы. EF может кэшировать объекты локально в DataContext (и отследить все изменения, внесенные в объекты), но, пока Вы следуете правилу сохранить контекст, открываются только при необходимости, это won' t быть проблемой. –  15.05.2020, 21:14

Я использовал фрагменты кода выше, чтобы определить, есть ли касание, поэтому мои фреймворки в fancybox будут отображаться на настольных компьютерах, а не на ощупь. Я заметил, что Opera Mini для Android 4.0 все еще регистрировалась как устройство без сенсорного ввода, когда использовался только код blmstr. (Кто-нибудь знает почему?)

Я закончил тем, что использовал:

<script>
$(document).ready(function() {
    var ua = navigator.userAgent;
    function is_touch_device() { 
        try {  
            document.createEvent("TouchEvent");  
            return true;  
        } catch (e) {  
            return false;  
        }  
    }

    if ((is_touch_device()) || ua.match(/(iPhone|iPod|iPad)/) 
    || ua.match(/BlackBerry/) || ua.match(/Android/)) {
        // Touch browser
    } else {
        // Lightbox code
    }
});
</script>
4
ответ дан 16.04.2020, 02:25
  • 1
    Вы могли объяснить, почему Вы не делаете для использования единственного вызова соответствия с единственным regexp /iPhone|iPod|iPad|Android|BlackBerry/? – user907860 16.04.2020, 02:25
  • 2
    Я даже don' t думают о выполняющихся строковых запросах (некоторая вещь как DBContext. ExecuteQuery (" выберите * из [имени таблицы] где [имя поля] > 10) "). It' s не вариант вообще. – Crossman 15.05.2020, 21:13

Теги

Похожие вопросы