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

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

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

Скрипт определения пользовательского устройства

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

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

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

<head>
	<script src="device.js"></script>
</head>

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

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

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

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

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

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

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

  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets

Какие 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

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

(5 голосов. Рейтинг: 5,00 из 5)
Загрузка...

Метки: ,

Рубрика: jQuery

Комментарии (26)

| RSS комментария

  1. Антон:

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

  2. Валерий:

    Здравствуйте! Мне нужно в сайте отключить плагин при входе с устройства с Андроид. Может ли как-то помочь этот скрипт? Хотел бы просто переподключать стили в зависимости от…, но пока не получается.

    • Дмитрий Британ:

      тут два варианта, либо искать скрипт определения пользовательского устройства на стороне сервера и там прописывать условия для загрузки файла стилей, либо попробовать использовать JS для ассинхронной загрузки файла стилей. Нужно пробовать, почитайте ответы тут stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript

  3. и я с этой кнопкой )))) малаток – повеселил

  4. Роман:

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

    • Дмитрий Британ:

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

  5. Владимир Балтиморов:

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

    • Дмитрий Британ:

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

      • Владимир Балтиморов:

        номер прикреплен к what’s app или viber.есть возможность вбивать номера в софт,и он будет показывать номера,на которых есть данные мессенджеры.Исходя из этого реально ли пробить на какой базе стоит данные мессенджер?
        спасибо!

  6. Добрый день! У меня такая проблеммка: сайт на вордпресс, тема адаптивная, но на мобильных устройствах всё-равно открывается как на пк…то есть сайт не понимает, с какого устройства его открыли…device.js пробовала использовать, но что-то не получилось…подскажите пожалуйста, как быть? Желательно подробнее, я новичок!

    • Андрей:

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

  7. Валерий марченко:

    Я столкнулся с довольно странным явлением, «физический» т. е. теоретический смысл которого не в состоянии уразуметь.
    Короче.
    Есть компьютер, на котором установлены 2 Системы: Windows XP и Windows 10.
    (У меня – этап знакомства с последней).
    И там и там инсталлирован браузер Google Chrome.
    Так вот, находясь в Windows 10, я пытался открыть свою страницу с альбомами фотографий на «Яндексе» по адресу: //m.fotki.yandex.ru/users/…….
    И вдруг от (Google) мне сообщает: «Страница m.fotki.yandex.ru не работает. Сайт m.fotki.yandex.ru выполнил переадресацию слишком много раз».
    Присмотревшись внимательно к адресу, я заметил лишнюю букву «m».
    То есть, должно быть просто: //fotki.yandex.ru/users/……. БЕЗ буквы «m»!
    Я возрадовался (!), что быстро обнаружил ошибку (не понимая, впрочем, откуда она взялась) и УБРАЛ эту лишнюю букву…
    Каким же было мое удивление, когда И БУКВА, И СООБЩЕНИЕ – появились снова!
    Перезагружаюсь в Windows XP. Проверяю адрес. Буквы «m» нет и Google прекрасно открывает страницу.
    Перезагружаюсь в Windows 10. Опять появляется буква «m» и соответствующее сообщение!
    ЧТО происходит?
    Мне сказали, что сайт “видит” мой компьютор как мобильник!
    Что делать?

    • Дмитрий Британ:

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

  8. Николай:

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

    • Дмитрий Британ:

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

  9. Анна:

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

    • Дмитрий Британ:

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

      • Андрей:

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

      • Доня:

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

  10. Стас:

    Не работает этот ваш придурошный скрипт. Зашёл на свой сайт со смартфона и посмотрел код. Ну так в итоге эта задница пресваевает тегу html класс “desktop”. Точно такой же вписывается если заходить с компа. Бесполезная хрень. Только время зря потратил.

    • Дмитрий Британ:

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

      • Стас:

        Решил я всё таки найти время и перепроверить этот скрипт. И действительно работает. Прошу прощения. Но тем не менее он всё же работает можно сказать лишь только на половину. Когда заходишь на мобильную версию сайта, то всё ок. Но стоит на смартфоне в браузере переключиться в полную версию сайта, то он становиться бесполезен. А мне же в первую очередь именно это и нужно было… Ну и в общем в итоге я решил написал свой небольшой скрипт:

        if (/Linux/i.test(navigator.userAgent)){
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        document.documentElement.className = “mobile”;
        }else{
        document.documentElement.className = “mobile-p”;
        }
        }

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

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

    • Дмитрий Британ:

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

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