Как определить мобильный браузер js
Обновлено: 04.07.2024
Есть ли способ определить, использует ли пользователь мобильное устройство в jQuery? Что-то похожее на CSS @media атрибут? Я хотел бы запустить другой сценарий, если браузер находится на портативном устройстве.
JQuery $.browser функция - это не то, что я ищу.
Вместо использования jQuery вы можете использовать простой JavaScript для его обнаружения:
Или вы можете объединить их оба, чтобы сделать его более доступным через jQuery .
В настоящее время $.browser вернется 'device' для всех вышеперечисленных устройств
Заметка: $.browser удалено на jQuery v1.9.1. Но вы можете использовать это, используя плагин миграции jQuery. Код
Более подробная версия:
- 460 Обнюхивание пользовательского агента - очень простой метод обнаружения, строки пользовательского агента - это постоянная движущаяся цель, им нельзя доверять. Людям, голосующим за этот пост, следует подумать о дополнительных исследованиях.
- 70 Одна из проблем со сниффингом только определенных устройств из пользовательского агента заключается в том, что вы должны не забывать обновлять свое обнаружение, когда появляются новые устройства. Это не идеальное решение.
- 12 Браузер Dolphin на Android не отправляет ни одной из этих строк!
- 90 Если ваш пользователь достаточно хитрый или разработчики достаточно глупы, чтобы изменить строку пользовательского агента, кого это волнует .
- 60 Итак, каким мобильным вы бы считали Android-телевизор с мышью? Насколько мобильным является ПК с Windows, который может работать в двойном режиме (с клавиатурой или как сенсорный экран)? Если вы сделали это до изобретения iPad, то вам пришлось добавить его позже на все свои сайты. Следующие выходящие ОС: Ubuntu Mobile, FirefoxOS, Tizen . .This.Is.A.Bad.Idea.
Для меня маленькое - это прекрасно, поэтому я использую эту технику:
В файле jQuery / JavaScript:
Моя цель заключалась в том, чтобы мой сайт был удобен для мобильных устройств. Поэтому я использую CSS Media Queries, чтобы отображать / скрывать элементы в зависимости от размера экрана.
Например, в моей мобильной версии я не хочу активировать Facebook Like Box, потому что он загружает все эти изображения профиля и прочее. А это плохо для мобильных посетителей. Итак, помимо скрытия элемента контейнера, я также делаю это внутри блока кода jQuery (см. Выше):
Я все еще работаю над мобильной версией, так что на момент написания она все еще не выглядела так, как должна.
Обновление от dekin88
Для обнаружения медиа есть встроенный JavaScript API. Вместо того, чтобы использовать вышеуказанное решение, просто используйте следующее:
Преимущество этого метода заключается в том, что он не только проще и короче, но и в том, что при необходимости можно отдельно настраивать таргетинг на разные устройства, такие как смартфоны и планшеты, без добавления каких-либо фиктивных элементов в DOM.
Согласно Mozilla - обнаружение браузера с помощью пользовательского агента:
Таким образом, мы рекомендуем искать строку Mobi в любом месте пользовательского агента, чтобы обнаружить мобильное устройство.
Это будет соответствовать всем распространенным пользовательским агентам мобильных браузеров, включая мобильные Mozilla, Safari, IE, Opera, Chrome и т. Д.
Обновление для Android
EricL рекомендует тестировать Android также в качестве пользовательского агента, поскольку строка пользовательского агента Chrome для планшетов не включает "Mobi" (однако в телефонных версиях есть):
Простой и эффективный однострочник:
Однако приведенный выше код не учитывает случай ноутбуков с сенсорным экраном. Таким образом, я предоставляю вторую версию, основанную на решении @Julian:
- 31 А как насчет ноутбуков с Windows с сенсорным экраном?
- 11 Второй isMobile предоставленная вами функция возвращает true на моем дестопе !! (Google Chrome версии 44.0)
- 14 Это больше похоже на метод isTouchSupported, а не на обнаружение мобильных устройств.
- 3 Не все мобильные телефоны имеют сенсорные экраны.
- 1 @Andrew, но с точки зрения разработчика, эти устройства должны составлять такой крошечный процент мобильных пользователей, что их не стоит обслуживать. Особенно в США.
Например, где проходит грань между мобильным и немобильным? С каждым днем он становится все более и более размытым.
Он предоставляет сценарии для обнаружения мобильных браузеров на нескольких языках, одним из которых является JavaScript. Это может помочь вам с тем, что вы ищете.
Так как я не знаю, чего именно вы пытаетесь достичь, я не знаю, какие из них будут наиболее полезными.
Иногда желательно знать устройство какой марки использует клиент, чтобы показывать контент, специфичный для этого устройства, например ссылку на магазин iPhone или рынок Android. Modernizer великолепен, но показывает вам только возможности браузера, такие как HTML5 или Flash.
Вот мое решение UserAgent в jQuery для отображения разных классов для каждого типа устройства:
- Это прекрасно работает. Мне нужно было отключить функцию jQuery, которая запускается при прокрутке при использовании телефона iPad или Android, и, поскольку разные устройства имеют разную ширину экрана, это было простое решение. Благодаря тонну.
- Единственная проблема с использованием теста Android - это то, что насчет nook, который использует пользовательский агент Android.
- Хороший ответ, который показывает, что нам не обязательно быть фундаменталистами в области обнаружения функций.
А затем, чтобы убедиться, что это мобильный телефон, вы можете протестировать, используя:
На iPhone у вас будет window.screen.width равное 320. На Android вы получите window.outerWidth равное 480 (хотя это может зависеть от Android). iPad и планшеты Android будут возвращать числа, например 768, поэтому они будут видеть все, как вы хотите.
- 1 почему недостаточно window.screen.width? Похоже, вы берете меньшее из "window.screen.width" или "window.outerWidth". Почему вас волнует "outerWidth"? Заранее спасибо за ответ!
- 9 Многие мобильные телефоны имеют ширину> 1000, особенно в альбомном режиме.
Если вы используете Modernizr, им очень легко пользоваться Modernizr.touch как упоминалось ранее.
Однако я предпочитаю использовать комбинацию Modernizr.touch и тестирование пользовательского агента, на всякий случай.
Если вы не используете Modernizr, вы можете просто заменить Modernizr.touch функция выше с ('ontouchstart' in document.documentElement)
Также обратите внимание, что тестирование пользовательского агента iemobile предоставит вам более широкий спектр обнаруженных мобильных устройств Microsoft, чем Windows Phone .
Также см. Этот вопрос SO
CSS использует ширину (медиа-запросы), чтобы определить, какие стили применяются к веб-документу на основе ширины. Почему бы не использовать ширину в JavaScript?
Например, в медиа-запросах Bootstrap (Mobile First) существует 4 точки привязки / останова:
- Очень маленькие устройства имеют разрешение 768 пикселей и ниже.
- Малые устройства имеют диапазон от 768 до 991 пикселей.
- Средние устройства имеют диапазон от 992 до 1199 пикселей.
- Большие устройства имеют разрешение 1200 пикселей и выше.
Мы также можем использовать это, чтобы решить нашу проблему с JavaScript.
Сначала мы создадим функцию, которая получает размер окна и возвращает значение, которое позволяет нам видеть, какого размера устройство просматривает наше приложение:
Теперь, когда у нас настроена функция, мы можем вызвать ее и сохранить значение:
Я хотел бы запустить другой сценарий, если браузер находится на портативном устройстве.
Теперь, когда у нас есть информация об устройстве, все, что осталось, - это оператор if:
Планшеты Android, iPad, Kindle Fires и PlayBook не распознаются конструкцией. Чтобы добавить поддержку планшетов, добавьте |android|ipad|playbook|silk к первому регулярному выражению.
Если вас не особенно беспокоят маленькие дисплеи, вы можете использовать определение ширины / высоты. Таким образом, если ширина меньше определенного размера, мобильный сайт будет отображаться. Возможно, это не лучший способ, но его, вероятно, будет проще всего обнаружить для нескольких устройств. Возможно, вам понадобится установить специальный для iPhone 4 (большое разрешение).
- 6 Не допускается произвольное отклонение ответа без оставления комментария. В лучшем случае это грубо.
Чтобы добавить дополнительный уровень контроля, я использую хранилище HTML5, чтобы определить, использует ли оно мобильное хранилище или хранилище для настольных компьютеров. Если браузер не поддерживает хранилище, у меня есть массив имен мобильных браузеров, и я сравниваю пользовательский агент с браузерами в массиве.
Все очень просто. Вот функция:
- 1 ваше предположение, основанное на localStorage, довольно интересно, можете ли вы предоставить ряд поддерживаемых устройств или браузеров, которые правильно соответствуют вашему сценарию? Мне интересно найти решение для этого вопроса, который я задал, и попытка обнаружить браузеры мобильных планшетов действительно может быть интересным обходным путем.
Вкратце, если вы импортируете крошечный файл JavaScript:
У вас останется объект JSON, который выглядит так:
(Конечно, при условии, что вы используете Nexus 7), и вы сможете делать такие вещи, как:
Это то, что вы ищете.
Отказ от ответственности: я работаю в компании, которая предлагает эту бесплатную услугу.
- 1 Мне такой подход нравится, я поднял window.matchMedia('(pointer:coarse)').matches; из другого ответа.
- Это мой предпочтительный подход, поскольку меня волнует размер экрана / области просмотра, а не то, является ли устройство мобильным, поскольку мы знаем, что размеры мобильных устройств сильно различаются, а окна браузера могут быть очень маленькими даже на больших мониторах. Имея это в виду, лучшим названием могло бы быть isSmallScreen но это только мое предпочтение.
Отличный ответ, спасибо. Небольшое улучшение для поддержки Windows Phone и Zune:
Посмотрите этот пост, он дает действительно хороший фрагмент кода о том, что делать при обнаружении сенсорных устройств или что делать, если вызывается событие touchstart:
Вот функция, которую вы можете использовать, чтобы получить истинный / ложный ответ о том, используете ли вы мобильный браузер. Да, это анализ браузера, но иногда это именно то, что вам нужно.
Все ответы используют пользовательский агент для обнаружения браузера, но обнаружение устройства на основе пользовательского агента не очень хорошее решение, лучше обнаруживать такие функции, как сенсорное устройство (в новом jQuery они удаляют $.browser и использовать $.support вместо).
Чтобы обнаружить мобильный телефон, вы можете проверить события касания:
Взято из Как лучше всего обнаружить устройство с сенсорным экраном с помощью JavaScript?
Я бы предложил использовать следующую комбинацию строк, чтобы проверить, используется ли тип устройства.
Согласно строке документации Mozilla Mobi Рекомендовано. Но некоторые старые планшеты не вернутся, если только Mobi используется, поэтому мы должны использовать Tablet строка тоже.
Точно так же на всякий случай iPad и iPhone строки также могут использоваться для проверки типа устройства.
Большинство новых устройств вернутся true за Mobi одна строка.
Тогда используйте это:
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 Мобильный Safari / 537.36
Я использую это
Как-то потребовалось создать функцию, принимающую объект json со следующим форматом записи: "браузер":то, что следует вернуть, иначе говоря такую функцию, которая бы возвращала указанный объект в зависимости от браузера пользователя.
ТЗ, которое я для себя определил:
- браузеры можно группировать, указывая их через пробел
- браузерам можно задавать версию (ie6,opera10)
- браузерам можно задавать полную версию (opera10.15)
- поддержка самых популярных браузеров
Мой способ гарантированно не самый точный, так как он используют свойство userAgent объекта navigator, которое при желании подделывается, но с другой стороны любой способ проверки клиента как серверный, так и клиентский можно обойти. Так же встает вопрос о надобности такой "подделки", тем более мало какие роботы исполняют javascript код.
В случае если ни одного выражение не совпадает с браузером пользователя, возвращается "none", которое можно также указать как свойство передаваемого объекта.
Пример использования: (данный код повернет на 25 градусов все содержимое страницы в любом современном браузере)
Название браузера нужно вводить в следующем формате : ie, firefox, opera, chrome, safari, konqueror, iceweasel, seamonkey. Регистр неважен. Версия пишется слитно с название, пример: ie7. Если для нескольких браузеров должно возвратиться одно и тоже значение, вы просто указываете их через пробел, как
на примере ("chrome safari":"WebkitTransform"). В качестве возвращаемого значения может выступать любой объект JavaScript (строка, число, функция, логическое значение и т.д.)
Зачем проверять версию браузера и юзерагент, когда надо проверять то, что он умеет. Тем более, что ваш код даст огромную погрешность. Да и многие браузеры неправильно отдают свой агент.
Я перечислил какие браузеры поддерживаются, они не будут "неправильно" отдавать свой юзер-агент. И версия для каждого браузера определяется по индивидуальному правилу. Мне так же интересно, как вы будете проверять то, что умеет браузер, с большей пользой, когда любое свойство можно подменить, как и юзер-агент.
Это они на текущий момент не будут неправильно отдавать юзер-агент. Но никто не может поручиться за то, что будет завтра.
Конечно, проверять надо поддержку браузером конкретных свойств и методов. Путаница в юзер-агентах — правило, а неправильное определение стандартных свойств и методов — редкое исключение и косяк.
юзерагент без затей меняется, например в фаерфоксе без всяких бубнов, в системных параметрах браузера. к сожалению предложенный вами способ ненадежен и необъективен
В Opera он тоже легко подменяется в параметре Custom User Agent в opera:config. Там же меняется и navigator.appName.
судя по скрипту, он ищет непонятно где, не ясно что. где сам источник версии браузера, откуда берутся аргументы?
Спасибо! Везде работает кроме IE. :D (ie 6-ка)
IE Стабилен, как всегда
Спасибо за понятный и прозрачный код.
Не понимаю зачем было разводить флейм на тему ненадежности метода. 90% пользователей вообще не знают про строку юзерагента, а те, кто знают, изменяя эту строку, сами себе становятся злобными буратинами.
Автору зачет, респект и уважуха.
Все течет, все меняется - в IE10 данная функция работать не будет, потому что она ищет в userAgent подстроку "MSIE", а десятый ослик userAgent отдает вот такой: "Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; rv:11.0) like Gecko". Т.е. надо добавить поиск по названию IE-шного движка - Trident.
Спс большое за мануал!
вах вах вах. в IE10 зер гуд как работает у меня. Вот в IE11 не работает. Пришлось немного отсебятины сделать.
Author thank you very much!
Вот, переделал под современные реалии и улучшил юзабилити:
Результат выполнения функции:
Определение мобильных браузеров не поддерживается, но для них возвращается platform: "mobie".
Konqueror, Iceweasel, SeaMonkey выкинул за ненадобностью. Кому нужно их определять в 2016 году даже представить не могу.
(2/6) Обнаружение геолокации с помощью оператора If / Else - геолокация HTML5
Меня попросили создать настоящую HTML-страницу / JavaScript для имитации обнаружения мобильных устройств (iPhone / iPad / Android) с помощью кода JavaScript. Затем пользователь перейдет на другой экран, где у него будет запрашиваться адрес электронной почты.
Вы обнаружите строку пользовательского агента запрашивающего браузера, а затем решите на основе того, поступает она из мобильного браузера или нет. Это устройство не идеально и никогда не будет из-за того, что пользовательские агенты не стандартизированы для мобильных устройств (по крайней мере, насколько мне известно).
пример:
Вы можете получить пользовательский агент в javascript, выполнив следующие действия:
А затем выполните проверку в том же формате, что и этот (просто на примере iPhone, но другие должны быть немного другими)
редактировать
Вы бы создали простую HTML-страницу, например:
Довольно простое решение - проверить ширину экрана. Поскольку почти все мобильные устройства имеют максимальную ширину экрана 480 пикселей (в настоящее время), это довольно надежно:
Строка пользовательского агента также является местом для поиска. Однако первое решение все же лучше, поскольку даже если какое-то долбаное устройство не отвечает правильно для пользовательского агента, ширина экрана не врет.
Единственное исключение - планшеты, такие как ipad. У этих устройств ширина экрана больше, чем у смартфонов, и я бы, вероятно, выбрал для них строку user-agent-string.
- Правильно!! Мне нужно только обнаружить iPhone или Android. Так что это не должно быть проблемой, просто хочу сказать, что мне абсолютно не с чего начинать. Должен ли я создать фиктивную веб-страницу и встроить ее! Также как будет проверяться обнаружение? Нужно ли мне переносить скрипт на телефон?
- 13 Ой, как изменилась ширина экрана;)
- это лучшее и самое чистое решение
- 2 Несмотря на то, что этот код не будет выполнять более одного блока, поскольку он проверяет одну вещь снова и снова, этот код должен использовать блоки else-if по этой причине. Кроме того, что, если переменная пользовательского агента как-то изменится между блоками? Здесь он выполнит более 1 блока.
- Вы правы, и не забывайте, что код был 4 года назад :) и теперь есть лучшие инструменты или способы сделать ту же работу.
- 2 +1 для соответствия регулярным выражениям, что позволяет пользователям легко проверять наличие нескольких устройств за один раз. Тем не менее, я бы добавил для ясности, что, поскольку вы обозначаете / i в конце регулярного выражения для нечувствительного соответствия, действительно нет необходимости использовать верблюжий регистр в параметрах поиска. Следующее будет эквивалентно (а также поиск устройств Android): .match (/ ipad | iphone | ipod | android / i)
Простым решением может быть только css. Вы можете установить стили в своей таблице стилей, а затем настроить их в нижней части таблицы. Современные смартфоны имеют ширину всего 480 пикселей, хотя на самом деле они намного больше. Код для обнаружения меньшего экрана в css:
Надеюсь это поможет!
Итак, я сделал это. Спасибо вам всем!
Поскольку сейчас 2015 год, если вы наткнулись на этот вопрос, вам, вероятно, следует использовать window.matchMedia (и, если еще 2015 год, полифиллинг для старых браузеров):
- У меня это не сработало на Nexus 5 с Firefox.
- 2 Примечание от MDN Примечание. CSS2.1 и Media Queries 3 определили несколько дополнительных типов мультимедиа (tty, tv, projection, handheld, braille, embossed, aural), но они устарели в Media Queries 4 и не должны использоваться.
- См. Мой ответ ниже, у меня тоже почему-то КПК не работает.
Вы можете использовать строку агента пользователя, чтобы обнаружить это.
Вкратце, если вы импортируете крошечный файл JS:
у вас останется объект JSON, который выглядит так:
(конечно, при условии, что вы используете Nexus 7), и вы сможете делать такие вещи, как:
Это то, что вы ищете.
Отказ от ответственности: я работаю в компании, которая предлагает эту бесплатную услугу. Благодарю.
Это пример того, как проверить, загружена ли веб-страница в настольном или мобильном приложении.
JS будет выполняться при загрузке страницы, и вы можете выполнять определенные действия для рабочего стола при загрузке страницы, например, скрыть сканер штрих-кода.
Определите, что такое User Agent для устройств, которые вам нужно моделировать, а затем протестируйте переменную для этого.
Обнаружение устройства на основе пользовательского агента - не очень хорошее решение, лучше обнаруживать такие функции, как сенсорное устройство (в новом jQuery они удаляют $.browser и использовать $.support вместо).
Чтобы обнаружить мобильный телефон, вы можете проверить события касания:
Взято из Как лучше всего обнаружить устройство с сенсорным экраном с помощью JavaScript?
Это моя версия, очень похожая на верхнюю, но я думаю, что она хороша для справки.
Просто используйте DeviceDetection
- Вы на них работаете? Это буквально только что использованный пользовательский агент
Другая возможность - использовать mobile-detect.js. Попробуйте демо.
Использование браузера:
Node.js / Экспресс:
Пример:
Поскольку я (вроде безуспешно) искал подходящее решение для своего взлома, тем не менее, я хочу добавить сюда свой взлом: я просто проверяю поддержку ориентации устройства, что кажется наиболее значительным различием между мобильными и настольными компьютерами:
var is_handheld = 0; // просто глобальный if (window.DeviceOrientationEvent)
При этом, imho, страница также должна предлагать ручной выбор между макетом для мобильных устройств и компьютеров. У меня 1920 * 1080, и я могу увеличивать масштаб - упрощенный и урезанный блок wordpressoid - не всегда хорошо. Особенно форсирование макета на основе обнаружения неработающего устройства - это происходит постоянно.
Это скажет вам, нужно ли вам отображать элементы, наведенные на курсор, и что-либо еще, для чего требуется физический указатель. Затем изменение размера может быть выполнено в следующих медиа-запросах в зависимости от ширины.
Короче говоря, вы должны поддерживать переменные, относящиеся к тому, является ли экран сенсорным, а также с размером экрана. Теоретически у меня мог бы быть крошечный экран на рабочем столе с мышью.
- Если вы пытаетесь определить, отображать ли наведенные элементы, не следует ли вам использовать медиа-запрос (hover) вместо?
- @SpoonMeiser Я хочу сказать, что даже если устройство поддерживает наведение, мне нужно устройство, которое может зависать. Если у меня нет указателя, я не могу зависать.
- IIUC hover означает, что основное устройство ввода поддерживает наведение, которое указатель будет, но сенсорный экран не будет
Аналогично нескольким ответам выше. Эта простая функция мне очень подходит. Актуально на 2019 год
Существует достаточно большое количество браузеров, а также их версий. И проблема в том, что одни браузеры позволяют выполнить определённый скрипт, а другие не позволяют. Встаёт вопрос: а как узнать браузер пользователя в JavaScript, чтобы через условие решить: надо выполнять скрипт или нет. И о том, как определить имя и версию браузера пользователя я и напишу в этой статье.
Для таких целей существует объект Navigator, а точнее два его свойства: appName и appVersion. Давайте для начала выведем название браузера пользователю:
document.write("Вы используете браузер " + navigator.appName);
В результате Вы увидите имя браузера пользователя. Также огромное значение оказывает не только сам браузер, но и его версия. И для таких случаев используется свойство appVersion:
document.write("Версия Вашего браузера " + navigator.appVersion);
Свойства appName и appVersion доступны только для чтения (это и логично), поэтому изменить их у Вас не получится. Теперь встаёт вопрос, а как использовать их в операторе IF:
var browser = navigator.appName;
if (browser == "NetScape")
document.write("Тут можно выполнять скрипты для обладателей браузеров NetScape");
Надеюсь, что я ответил на Ваш вопрос: "Как узнать имя и версию браузера в JavaScript".
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 10 ):
И для FFox напишет Netscape
Проблем при определении браузера много, чтобы узнать, что это chrome, нужно анализировать navigator.appVersion. Для других браузеров могут быть другие свойства (appName или appCodeName).
Ну и как это сделать?
Выведите сначала, посмотрите на значение, а дальше используйте функции для работы со строками.
Ну я уже понял как.
Читайте также: