Веб-Острова Анатолия Куликова

Определяем устройство с помощью PHP

Определяем устройство с помощью PHP

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

Прошлая методика с помощью медиазапросов по ширине экрана в моих глазах себя изжила — в таком случае на страницу всё равно загружается все элементы, только часть из скрывается или модернизируется. С одной стороны — это правильный и надёжный подход. С другой стороны, когда у нас присутствуют тяжёлые медиафайлы (например, видеофон) или немного другое расположение элементов, то будет намного проще и лучше грузить только нужные элементы в зависимости от того, каким устройством пользуется посетитель сайта.

Итак, я пошёл в интернет за готовым ответом, поскольку издавна исповедую практику «Сначала попробовать чужие костыли готовые решения, а если не нашёл — писать самостоятельно». Собственно, что я нашёл в интернете — это использовать $_SERVER[«HTTP_USER_AGENT»] или вообще пользоваться JavaScript’ом.

Затем, на одном форуме нашёл таки описание интересного и простого php-скрипта, которым уже достаточно давно пользуюсь и хочу поделиться с вами. Называется он Mobile-Detect (ссылка на GitHub). Это очень легковесное и удобное решение, которое использует ту самую строчку HTTP_USER_AGENT в комплекте с определёнными заголовками.

Проект постоянно поддерживается и обновляется, ибо весьма полезная вещь.

Подключается скрипт очень просто — с помощью requred_once мы указываем путь к файлу, а затем инициализируем объект:

Настройка скрипта завершена. Теперь через использование $detect мы можем определять устройства. Нам доступны следующие переменные для определения типа устройств:

  • isMobile — переменная, которая определяет любое мобильное устройство — как смартфон, так и планшет;
  • isTablet — переменная, которая предназначена для определения только планшетных компьютеров.

Также существуют две переменные для определения операционной системы мобильного устройства:

  • isiOS — определяет устройства под управлением iOs (iPhone и iPad);
  • isAndroidOS — устройства на Android;
  • isWindowsMobileOS и isWindowsPhoneOS — тут можно не просто узнать, что эта мобильная система производства Microsoft, но даже указать его версии. WindowsMobile уже не столь актуальна, поскольку мелкомягкие перешли на единую платформу, но если вдруг к нам зайдут пользователи Pocket PC и Smartphone, то мы модем предложить для них уникальный сервис;
  • isBlackBerryOS — можно определить также смартфоны этого производителя. Для России аппараты BlackBerry не слишком актуальны, но возможно всё (вдруг вы или ваш заказчик — фанат или пользователь этого девайса, и нужно сделать что-то особенное для других пользователей);
  • isPalmOS и isSymbianOS — для устройств на таких операционных системах есть переменные для определения. Для меня это очень редкие устройства — настолько, что в жизни таких не видел (но это не точно), только на сайты заходят редкие пользователи этих устройств.

Кроме того, скрипт может определять производителя устройства. Укажу всего несколько переменных для определения вендора устройства, которые нам доступны:

  • isiPhone и isiPad — можно чётко определить для каждого из устройств Apple, что показывать его пользователю;
  • isSamsung — для устройств производства Samsung, один из самых популярных производителей;
  • isLG — телефоны производства LG также весьма популярны и для них можно сделать что-то особое;
  • isVertu — посетитель вашего сайта обладатель телефона Vertu, нужно больше золота (и умножаем все цены в магазине на 10).

В реальности этих переменных намного больше — на демо-странице скрипта можно увидеть список поддерживаемых переменных.

Для тех, кто хочет убойной точности и избирательности, можно указывать нужные устройства через значения UserAgent, но по мне такая избирательность уж слишком чрезмерная (хотя бывает всякое).

Разработчики не перестают совершенствовать свой продукт и вполне вероятно, что скоро нам будет доступна возможность определения версий браузеров и устройств (в первую очередь для продукции Apple) — функции уже есть в последнем релизе, но пока они находятся на бета-тестировании.

Теперь давайте разберём на примере принцип работы скрипта. Допустим, мы должны выводить для посетителя сайта разные сообщения в зависимости от операционной системы его устройства. Это будет выглядеть так:

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

Предлагаю вашему вниманию ещё один пример, который используется на моём сайте. Суть кода следующая — мы выводим разные варианты шапки сайта в зависимости от типа устройства. Код (с сокращениями) следующий:

И напоследок самое сладкое — эта библиотека была портирована на JavaScriptVarnish Cache и LUA.

На основе этого скрипта написаны плагины и модули для WordPress, Drupal, Joomla, Magento, PrestaShop (там он вообще поставляется в стандартном пакете с версии 1.5), Laravel, Yii Framework и множество других фреймворков и языков и платформ.

Библиотека очень полезная и весьма доставляющая.

Всем отличного пользования!

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик

Новые статьи

Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Отслеживаем нажатие клавиш на клавиатуре и совершаем действия
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
Скроллинг по странице

Скроллинг по странице

Делаем плавный скроллинг по странице с помощью JQuery и HTML5
AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Векторный редактор онлайн

Векторный редактор онлайн

Vectr — свободный векторный редактор онлайн и офлайн

Статьи по теме

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Красивый адрес для YouTube-канала

Красивый адрес для YouTube-канала

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

Модальное окно на чистом CSS

Создаем модальное окно на чистом CSS без использования javascript
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
Обзор Icons8 — гибкая библиотека иконок

Обзор Icons8 — гибкая библиотека иконок

Достаточно своеобразная библиотека иконок (бесплатных и не очень) с широким функционалом