Есть ли надежный способ определить, использует ли пользователь мобильное устройство в jQuery? Что-то похожее на атрибут CSS @media? Я хотел бы запустить другой скрипт, если браузер находится на портативном устройстве.
Функция jQuery $.browser
- это не то, что я ищу.
javascript
jquery
mobile
browser-detection
названия
источник
источник
Ответы:
Примечание редактора: обнаружение пользовательских агентов не рекомендуется для современных веб-приложений. Смотрите комментарии ниже этого ответа для подтверждения этого факта. Предлагается использовать один из других ответов с использованием функции обнаружения и / или медиазапросов.
Вместо использования jQuery вы можете использовать простой JavaScript для его обнаружения:
Или вы можете объединить их обоих, чтобы сделать его более доступным через jQuery ...
Теперь
$.browser
вернемся"device"
ко всем вышеперечисленным устройствамПримечание:
$.browser
удалено в jQuery v1.9.1 . Но вы можете использовать это, используя плагин миграции jQuery. КодБолее полная версия:
источник
.This.Is.A.Bad.Idea.
Для меня маленький красивый, поэтому я использую эту технику:
В файле CSS:
В файле jQuery / JavaScript:
Моей целью было сделать мой сайт «мобильным». Поэтому я использую CSS Media Queries, чтобы показать / скрыть элементы в зависимости от размера экрана.
Например, в моей мобильной версии я не хочу активировать Facebook Like Box, потому что он загружает все эти изображения профиля и прочее. И это не хорошо для мобильных посетителей. Итак, помимо скрытия элемента контейнера, я также делаю это внутри блока кода jQuery (см. Выше):
Вы можете увидеть это в действии на http://lisboaautentica.com
Я все еще работаю над мобильной версией, так что она все еще не выглядит так, как следует, на момент написания этой статьи.
Обновление от dekin88
Для обнаружения мультимедиа встроен JavaScript API. Вместо того, чтобы использовать вышеуказанное решение, просто используйте следующее:
Поддержка браузера: http://caniuse.com/#feat=matchmedia
Преимущество этого метода заключается в том, что он не только проще и короче, но также может условно нацеливаться на разные устройства, такие как смартфоны и планшеты, отдельно, если это необходимо, без добавления каких-либо фиктивных элементов в DOM.
источник
screen.width
Свойство глобальное. Нет необходимости произвольно добавлять элемент в DOM и без необходимости вводить медиазапросы CSS. Плюс, если браузер находится на рабочем столе и пользователь изменяет размер окна,$is_mobile
обновление не будет.if( screen.width <= 480 ) { // is mobile }
width
значение атрибута IIRC. Таким образом, сетчатка iPhone будет иметьwidth
от640
и высоты960
в портретном, иwidth
из960
и высоты640
в ландшафте.window.matchMedia
: developer.mozilla.org/en-US/docs/Web/API/Window.matchMediaПо словам Mozilla - Обнаружение браузера с помощью пользовательского агента :
Нравится:
Это будет соответствовать всем распространенным пользовательским агентам мобильных браузеров, включая мобильные Mozilla, Safari, IE, Opera, Chrome и т. Д.
Обновление для Android
EricL рекомендует также проводить тестирование
Android
в качестве пользовательского агента, поскольку строка пользовательского агента Chrome для планшетов не включает в себя «Mobi» (однако версии для телефонов включают):источник
/Mobi/i.test(navigator.userAgent)
однако, так как test () возвращает логическое значение./Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent)
Простой и эффективный однострочник:
Однако приведенный выше код не учитывает случай для ноутбуков с сенсорным экраном. Таким образом, я предоставляю эту вторую версию, основанную на решении @Julian :
источник
isMobile
функция, которую вы предоставили, возвращаетсяtrue
на моем устройстве destop !! (Google Chrome v44.0)То, что вы делаете, пытаясь обнаружить мобильное устройство, становится слишком близко к концепции IMO «анализ кода браузера». Скорее всего, было бы намного лучше определить некоторые функции. Библиотеки как http://www.modernizr.com/ могут помочь с этим.
Например, где проходит граница между мобильным и немобильным? Это становится все более размытым с каждым днем.
источник
Это не jQuery, но я нашел это: http://detectmobilebrowser.com/
Он предоставляет скрипты для обнаружения мобильных браузеров на нескольких языках, одним из которых является JavaScript. Это может помочь вам с тем, что вы ищете.
Тем не менее, поскольку вы используете jQuery, вам может потребоваться информация о коллекции jQuery.support. Это набор свойств для определения возможностей текущего браузера. Документация находится здесь: http://api.jquery.com/jQuery.support/
Поскольку я не знаю, чего именно вы пытаетесь достичь, я не знаю, какой из них будет наиболее полезным.
При всем этом, я думаю, вам лучше всего либо перенаправить, либо написать другой скрипт для вывода, используя язык на стороне сервера (если это вариант). Поскольку вы на самом деле не знаете возможностей мобильного браузера x, выполнение логики обнаружения и изменения на стороне сервера будет наиболее надежным методом. Конечно, все это спорный вопрос, если вы не можете использовать язык на стороне сервера :)
источник
|android|ipad|playbook|silk
как описано в разделе about (этоИногда желательно знать, какое устройство бренда использует клиент, чтобы показать контент, специфичный для этого устройства, например ссылку на магазин iPhone или на рынок Android. Модернизатор хорош, но показывает только возможности браузера, такие как HTML5 или Flash.
Вот мое решение UserAgent в jQuery для отображения разных классов для каждого типа устройства:
Это решение от графических маньяков http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/
источник
Нашел решение в: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .
И затем, чтобы проверить, является ли это Mobile, вы можете проверить, используя:
источник
Если под «мобильным» вы подразумеваете «маленький экран», я использую это:
На iPhone вы получите window.screen.width 320. На Android вы получите window.outerWidth 480 (хотя это может зависеть от Android). iPad и планшеты Android будут возвращать цифры, например, 768, поэтому они получат полный обзор, как вам хотелось бы.
источник
Если вы используете Modernizr , его очень легко использовать,
Modernizr.touch
как упоминалось ранее.Однако я предпочитаю использовать комбинацию
Modernizr.touch
и тестирование пользовательского агента, чтобы быть в безопасности.Если вы не используете Modernizr, вы можете просто заменить
Modernizr.touch
вышеуказанную функцию на('ontouchstart' in document.documentElement)
Также обратите внимание, что тестирование пользовательского агента
iemobile
предоставит вам более широкий спектр обнаруженных мобильных устройств Microsoft, чемWindows Phone
.Также посмотрите этот ТАК вопрос
источник
TouchEvent.supported
.('ontouchstart' in window)
альтернативаModernizr.touch
тоже hacks.mozilla.org/2013/04/…|
вместо многих совпадений. Вам также не нужно,toLowerCase()
потому что у вас естьi
модификатор. Здесь:var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent);
Вы не можете положиться
navigator.userAgent
, не каждое устройство показывает свою настоящую ОС. На моем HTC например это зависит от настроек («использование мобильной версии» вкл / выкл). На http://my.clockodo.com мы просто использовалиscreen.width
для обнаружения небольших устройств. К сожалению, в некоторых версиях Android есть ошибка с screen.width. Вы можете комбинировать этот способ с userAgent:источник
Я знаю, что на этот вопрос есть много ответов, но из того, что я увидел, никто не подходит к ответу так, как я бы решил.
CSS использует width (Media Queries), чтобы определить, какие стили применяются к веб-документу на основе ширины. Почему бы не использовать ширину в JavaScript?
Например, в медиазапросах Bootstrap (Mobile First) существует 4 точки привязки / прерывания:
Мы также можем использовать это для решения нашей проблемы с JavaScript.
Сначала мы создадим функцию, которая получает размер окна и возвращает значение, которое позволяет нам увидеть, какой размер устройства просматривает наше приложение:
Теперь, когда мы настроили функцию, мы можем вызвать ее и сохранить значение:
Ваш вопрос был
Теперь, когда у нас есть информация об устройстве, остается только оператор if:
Вот пример на CodePen: http://codepen.io/jacob-king/pen/jWEeWG
источник
Small Devices range from 768 to 991 pixels.
это означает, что это должно бытьwindow.innerWidth < 992
(991 включено) то же самое, что для 1199 это должно быть <1200 вместо этогоВ одной строке JavaScript:
Если пользовательский агент содержит «Mobi» (согласно MDN) и доступен ontouchstart, то это может быть мобильное устройство.
источник
/Mobi/.test(navigator.userAgent)
...match
не сделал это для меняЯ удивлен, что никто не указал на хороший сайт: http://detectmobilebrowsers.com/ Он имеет готовый код на разных языках для мобильного обнаружения (включая, но не ограничиваясь):
И если вам нужно обнаружить планшеты, просто проверьте раздел «О» для получения дополнительного параметра RegEx.
источник
Если вы не особенно беспокоитесь о маленьких дисплеях, вы можете использовать определение ширины / высоты. Таким образом, если ширина меньше определенного размера, мобильный сайт перебрасывается. Возможно, это не идеальный способ, но, вероятно, его будет проще всего обнаружить на нескольких устройствах. Возможно, вам придется вставить конкретный для iPhone 4 (большое разрешение).
источник
Чтобы добавить дополнительный уровень контроля, я использую хранилище HTML5, чтобы определить, использует ли оно мобильное хранилище или хранилище на рабочем столе. Если браузер не поддерживает хранилище, у меня есть массив имен мобильных браузеров, и я сравниваю пользовательский агент с браузерами в массиве.
Это довольно просто. Вот функция:
источник
Если установлено, что просто проверка
navigator.userAgent
не всегда надежна. Большая надежность может быть достигнута также путем проверкиnavigator.platform
. Простая модификация предыдущего ответа, кажется, работает лучше:источник
Я советую вам проверить http://wurfl.io/
В двух словах, если вы импортируете крошечный файл JavaScript:
У вас останется объект JSON, который выглядит следующим образом:
(Это предполагает, что вы используете Nexus 7, конечно), и вы сможете делать такие вещи, как:
Это то, что вы ищете.
Отказ от ответственности: я работаю в компании, которая предлагает этот бесплатный сервис.
источник
Прочтите этот пост , он дает действительно хороший фрагмент кода для того, что делать, когда обнаруживаются сенсорные устройства, или что делать, если вызывается событие touchstart:
источник
'ontouchstart' in document.documentElement
это, вероятно, лучший тест для сенсорной поддержки, чемwindow.Touch
. Более того, используйте Modernizr.js ( modernizr.com ), потому что потратили много времени, пытаясь получить правильное распознавание касания. Вы можете увидеть их код обнаружения прикосновения на сайте modernizr.com/downloads/modernizr.js, если посмотрите код разработки и выполните поиск по запросу "touch".Вот функция, которую вы можете использовать, чтобы получить истинный / ложный ответ о том, работаете ли вы в мобильном браузере. Да, это браузер нюхает, но иногда это именно то, что вам нужно.
источник
for
для этого! + Вы забыли создать RegExp. Вот более простой:return !!navigator.userAgent.match(new RegExp(agents.join('|'),'i'))
Все ответы используют user-agent для обнаружения браузера, но обнаружение устройства на основе user-agent - не очень хорошее решение, лучше обнаруживать такие функции, как сенсорное устройство (в новом jQuery они удаляются
$.browser
и используются$.support
вместо).Для обнаружения мобильного телефона вы можете проверить сенсорные события:
Взято из Наилучший способ обнаружить устройство с «сенсорным экраном» с помощью JavaScript?
источник
true
на настольные ПК с сенсорными экранами. stucox.com/blog/you-cant-detect-a-touchscreenЯ бы предложил использовать следующую комбинацию строк, чтобы проверить, используется ли тип устройства.
Согласно документации Mozilla
Mobi
рекомендуется строка . Но некоторые из старых планшетов не возвращают true, если толькоMobi
используются, следовательно, мы должны также использоватьTablet
строку.Кроме того , для быть на безопасной стороне
iPad
иiPhone
строки могут быть также использованы для проверки типа устройства.Большинство новых устройств вернулось бы только
true
заMobi
строку.источник
источник
window.matchMedia("(pointer:coarse)").matches;
с другого ответа.Отличный ответ, спасибо. Небольшое улучшение для поддержки Windows Phone и Zune:
источник
if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/)){self.location = "top.htm"}
Использовать этот:
Тогда используйте это:
источник
Простая функция на основе http://detectmobilebrowser.com/
источник
Если вы зайдете в любой браузер и попытаетесь получить navigator.userAgent, мы получим информацию о браузере примерно так:
Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 64.0.3282.186 Safari / 537.36
То же самое, если вы делаете в мобильном телефоне, вы будете получать следующие
Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36
Каждый мобильный браузер будет иметь useragent со строкой, содержащей «Mobile», поэтому я использую приведенный выше фрагмент кода в своем коде, чтобы проверить, является ли текущий пользовательский агент веб / мобильным. На основании результата я буду делать необходимые изменения.
источник
Я использую это
источник
Как насчет mobiledetect.net ?
Другие решения кажутся слишком простыми. Это легкий класс PHP. Он использует строку User-Agent в сочетании с определенными заголовками HTTP для обнаружения мобильной среды. Вы также можете воспользоваться Mobile Detect, используя любые сторонние плагины, доступные для: WordPress, Drupal, Joomla, Magento и т. Д.
источник
Строки агента пользователя нельзя доверять в одиночку. Решение ниже будет работать во всех ситуациях.
и вызвать эту функцию:
источник