Js определить тип устройства планшет

Обновлено: 06.07.2024

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

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

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

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

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

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

вы пробовали использовать эту функцию? (Это то же самое, что использовал Modernizr.)

обновление 1

document.createEvent("TouchEvent") начали возвращаться true в последнем chrome (V. 17). Modernizr это некоторое время назад обновили. Проверьте тест Modernizr здесь.

обновите свою функцию так, чтобы она работала:

обновление 2

я обнаружил, что выше не было работа с IE10 (возврат false на MS Surface). Вот исправление:

обновление 3

'onmsgesturechange' in window вернет true в некоторых настольных версиях IE, так что это не надежно. Это работает несколько надежнее:

обновление 2018

время идет, и есть новые и лучшие способы проверить это. Я в основном извлек и упростил способ проверки Modernizr:

здесь они используют нестандартные touch-enabled функция медиа-запроса, которая, по-моему, странная и плохая практика. Но в реальном мире это работает. В будущем (когда они поддерживаются всеми) эти функции медиа-запросов могут дать вам те же результаты: pointer и hover .

для хорошей статьи, которая объясняет проблемы с сенсорным обнаружением, см.: Стью Кокс: Ты Не удается обнаружить сенсорный экран.

поскольку Modernizr не обнаруживает IE10 на Windows Phone 8 / WinRT, простое кросс-браузерное решение:

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

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

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

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

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

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

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

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

если вы не используете Modernizr, вы можете просто заменить

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

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

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

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

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

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

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

в итоге я использовал:

самый большой "gotcha" с попыткой обнаружить касание находится на гибридных устройствах, которые поддерживают как сенсорный, так и трекпад/мышь. Даже если вы можете правильно определить, поддерживает ли устройство пользователя touch, вам действительно нужно определить, какое устройство ввода пользователь в настоящее время использование. Там подробно написать об этом вызове и возможное решение здесь.

в основном подход к выяснению того, коснулся ли пользователь только что экран или используется мышь/ трекпад вместо этого, чтобы зарегистрировать оба touchstart и mouseover событие на странице:

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

более подробная информация здесь.

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

Я бы рекомендовал проверить этот вопрос на Modernizr.

вы хотите проверить, поддерживает ли устройство сенсорные события или сенсорное устройство. К сожалению, это не одно и то же.

нет, это невозможно. Превосходные ответы всегда частичны, потому что любой метод порождает ложные положительные и ложные отрицательные стороны. Даже браузер не всегда знает, присутствует ли сенсорный экран, из-за API ОС, и этот факт может измениться во время сеанса браузера, особенно с договоренностями типа KVM.

см. более подробную информацию в этом превосходном статья:

статья предлагает вам пересмотреть предположения, которые заставляют вас обнаруживать сенсорные экраны, они, вероятно, ошибочны. (Я проверил свое собственное приложение, и мои предположения были действительно неправильными!)

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

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

похоже, что Chrome 24 теперь поддерживает сенсорные события, вероятно, для Windows 8. Таким образом, код, размещенный здесь, больше не работает. Вместо того, чтобы пытаться определить, поддерживается ли touch браузером, я теперь связываю события touch и click и удостоверяюсь, что только один называется:

и затем называя его:

надеюсь, что это помогает !

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

в jQuery mobile 1.0.1

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

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

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

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

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

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

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

практический ответ, похоже, тот, который учитывает контекст:

1) общественное место (нет входа)
Код UI для работы с обоими параметрами вместе.

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

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

С jQuery версии v1.11.3

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

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

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

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

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

проблема

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

В веб разработке все чаще приходится учитывать мобильные устройства, чтобы подстроить CSS и javascript-ы под нужды пользователей. Рассмотрим отличный скрипт device.js, который позволяет менять CSS и поведение всего сайта в зависимости от того устройства, через которое мы на него зашли.

Данный скрипт совершенно бесплатен и его стали использовать многие разработчики в современных проектах. Он имеет очень маленький вес - всего 8кб и совершенно не нагружает сайт. Разберем более подробно возможности device.js.

Данный скрипт может:
1. Определить тип устройства (ПК, телефон или планшет).
2. Узнать ориентацию экрана: горизонтальная (альбомная) или вертикальная (портретная).
3. Определить тип Операционной системы устройства (iphone, android, windows, iOS и т.д.)

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

Теперь о том, какие команды надо использовать для работы со скриптом:

В данном примере эти проверки делают сканирование на тип устройства, его ОС и ориентацию экрана. Результаты проверки вы увидите в виде алертов.

Для верстки современных сайтов под мобильные устройства полезно знать с какого девайса пользователь просматривает ваш ресурс. Ограничиться только медиа-запросами получается не всегда.
Использовать большие библиотеки для столь точечной задачи нет нужды, есть маленький скрипт device.js минимизированная версия которого чуть более 3Kb.

Данный скрипт позволит вам определить операционную систему пользователя, само устройство (мобильный, планшет или ПК) и ориентацию пользовательского устройства (книжная или альбомная).
Одним словом device.js отлично справляется с поставленной задачей по определению пользовательского устройства.

Как использовать скрипт по определению пользовательского устройства?

1. Скачиваем сам скрипт и подключаем его в блоке head вашего сайта.

(по ссылке выше вы можете перейти на файл сжатой версии скрипта и сохранить его к себе на комп)
Добавляем к себе в проект:

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

Как работает скрипт по определению пользовательского устройства

Скрипт работает очень просто, он добавляет к тегу css классы, которые соответствуют пользовательскому устройству, например:

Если пользователь зашел с iPhone

то будут добавлены css классы указанные в на картинке выше.

Если пользователь зашел с Android

Какие пользовательские устройства, может определить данный скрипт?

Какие css классы добавляет скрипт для различных устройств?

Устройство	CSS классы
iPad	ios ipad tablet
iPhone	ios iphone mobile
iPod	ios ipod mobile
Android Phone	android mobile
Android Tablet	android tablet
BlackBerry Phone	blackberry mobile
BlackBerry Tablet	blackberry tablet
Windows Phone	windows mobile
Windows Tablet	windows tablet
Firefox OS Phone	fxos mobile
Firefox OS Tablet	fxos tablet
MeeGo	meego
Desktop	desktop

Если у вас остались вопросы, по использованию скрипта для определения пользовательского устройства с которого он зашел на ваш ресурс, задавайте их в комментариях, с радостью помогу 🙂

This entry was posted in jQuery and tagged detect user devices, пользовательские устройства. Bookmark the permalink. (5 голосов. Рейтинг: 5,00 из 5)

26 thoughts on “ Удобный скрипт для определения пользовательского устройства (мобильный, планшет или ПК) ”

СУчья красная кнопка. Пол дня сидел!

Возможно ли этот скрипт использовать для определения и показа ссылки звонка
только для мобильного, а остальным что типа display:none;
Что посоветуете.

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

Добрый день.
Скажите можно ли Ваш скрипт приспособить,чтобы он по номеру телефона,который прикреплен к вайберу или вотсапу определял его ОС?

Нет, такого сделать не получится. Скорее всего никакой скрипт с этим не справится т.к. номер телефона никак не связан с ОС самого телефона.

Пропишите в хеад секции метатег назначающий ширину вьюпорта по ширине устройства. Погуглите наподобии «мета-тег мобильная версия».

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

доброй ночи не подскажите как с помощью данного скрипта сделать фон то есть если человек зашел с IOS то фон 1 если Android то другой

Очень просто, данный скрипт прописывает соответствующие классы для блока html, воспользуйтесь этим при написании CSS кода, если не знаете как пишите, по возможности отвечу

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

Попробуйте поискать в интернете сервисы анонимайзеры, хотя какая цель вашей скрытности? )
Дело в том что браузер автоматически отдает много информации о вас, так задумано 🙂

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

Попробуйте перейти на сайт разработчика
и посмотреть, что будет показано на странице (должно показывать, что вы зашли с мобилки)
У меня данный скрипт работает, удачи вам 🙂

Хоть может немного и топорно сделал, но тем не менее всё работает. Я думаю что в любом случае такой вариант куда лучше, чем целая куча ненужного кода на 3Kb. Надеюсь что мой скрипт на вашем сайте исполняться не будет в комментах))

Почему не работает document.getElementById ?
С этой библиотекой??

Этот скрипт не может быть причиной такой ошибки, посмотрите свой код или скиньте что пишет в консоли.

Добавить комментарий Отменить ответ

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

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

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

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

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

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

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

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

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

В JQuery Mobile 1.0.1

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

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

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

Обновление (из-за комментариев): вышеупомянутое решение состоит в том, чтобы определить, является ли «грубый указатель» - обычно сенсорный экран - основным устройством ввода. Если вы хотите определить, является ли устройство, например, с У мыши также есть сенсорный экран, который можно использовать вместо any-pointer: coarse .

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

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

А затем называя это:

Надеюсь это поможет !

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

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

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

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

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

Проблема

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

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

Решение

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

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

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

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

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

Смотрите подробности в этой прекрасной статье:

В статье предлагается пересмотреть предположения, которые заставляют вас хотеть обнаруживать сенсорные экраны, они, вероятно, ошибочны. (Я проверил свое собственное приложение, и мои предположения были неверны!)

В статье делается вывод:

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

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

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

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

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

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

Я достиг этого как этот;

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

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

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

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

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

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

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

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

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

Я бы порекомендовал проверить эту проблему на Modernizr.

Вы хотите проверить, поддерживает ли устройство сенсорные события или является сенсорным устройством. К сожалению, это не одно и то же.

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

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

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

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

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

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

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

Действие касания вызовет оба этих события, хотя первое ( touchstart ) всегда будет первым на большинстве устройств. Таким образом, рассчитывая на эту предсказуемую последовательность событий, вы можете создать механизм, который динамически добавляет или удаляет класс can-touch к корню документа, чтобы отражать текущий тип ввода пользователя в данный момент на документ:

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

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

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

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

Вы пытались использовать эту функцию? (Это то же самое, что использовал Modernizr.)

ОБНОВЛЕНИЕ 1

document.createEvent("TouchEvent") начали возвращать true в последней версии Chrome (v. 17). Modernizr обновил это некоторое время назад. Ознакомьтесь с тестом Modernizr здесь.

Обновите свою функцию так, чтобы она работала:

ОБНОВЛЕНИЕ 2

Я обнаружил, что вышеупомянутое не работает на IE10 (возвращая false на MS Surface). Вот исправление:

'onmsgesturechange' in window будет возвращать true в некоторых версиях IE для настольных компьютеров, так что это ненадежно. Это работает немного надежнее:

ОБНОВЛЕНИЕ 2018

Время идет, и есть новые и лучшие способы проверить это. Я в основном извлек и упростил способ проверки Модернизра:

Здесь они используют нестандартную функцию медиазапроса touch-enabled , что, на мой взгляд, является странной и плохой практикой. Но эй, в реальном мире, я думаю, это работает. В будущем (когда они поддерживаются всеми) эти функции медиазапроса могут дать вам те же результаты: pointer и hover .

Для хорошей статьи, которая объясняет проблемы с сенсорным обнаружением, см .: Stu Cox: вы не можете обнаружить сенсорный экран .

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

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

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

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

В итоге я использовал:

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

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

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

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

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

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

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

Все поддерживаемые браузеры, кроме Firefox для настольных компьютеров, всегда ИСТИНА , потому что Firefox для настольных ПК поддерживает адаптивный дизайн для разработчиков, даже если вы нажмете сенсорную кнопку или нет!

Читайте также: