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

 

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

 О том, как определить размер экрана (дисплея) устройства пользователя, вы можете прочитать в статье "Как передать размеры экрана пользователя на сайт".

Определение и подстановка кода в соответствии с типом устройства

Для определения используемого пользователем устройства применяется простой переключатель на PHP-конструкции if, которая определяет соответствие полученных в запросе данных регулярному выражению. При поступлении запроса массив $_SERVER получает различную информацию, в том числе и содержимое заголовка User-Agent, в котором указываются операционная система устройства и данные используемого браузера. Например, для Яндекс.Браузера, установленном на компьютере или ноутбуке, придёт нечто подобное:

Здесь хорошо видно, что у пользователя установлена ОС Windows 10 и Яндекс.Браузер; так как данная операционная система устанавливается только на компьютеры и ноутбуки, то соответственно, это одно из этих двух устройств.

При поступлении запроса с мобильного устройства возможен такой вариант:

Данный заголовок содержит информацию о том, что пользователь использует ОС Android 12, что говорит о принадлежности к мобильным устройствам, и браузер Chrome; так же указана марка устройства - SM-A125F (смартфон А12, Samsung).  

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

Здесь применяются два PHP-функции preg_match, выполняющих проверку на соответствие полученных данных регулярному выражению и если хотя бы одна из них вернёт true, т.е. искомая комбинация букв будет найдена, то конструкция if запустит выполнение кода для мобильной версии; если же обе функции вернут false, то запустится код для десктопной версии. Обратите внимание, что первая функция ищет совпадение по целому слову, а вторая - только по первым четырём символам, получаемым при помощи функции substr

Регулярное выражение 1 имеет следующий вид:

Регулярное выражение 2 имеет такой вид:

 Вы можете скачать PHP-файл с приведённым в статье кодом "переключателя" и просто установить его в нужное место на вашем сайте:


 41 Скачать код для определения устройства пользователя вы можете  3


 Варианты установки (использования) переключателя типа устройства пользователя

Мобильная версия сайта

Если вы используете мобильную версию на поддомене "m." (например, m.мой_сайт.рф), то на "входе", т.е. в файле, к которому обращается система при поступлении запроса (как правило, это файл index.php), установите вот такую простую конструкцию:

Первая конструкция if определяет, какой домен запрошен пользователем: если my_site.ru, то при помощи второй конструкции if проверяется устройство пользователя; если обе функции preg_match вернут false, т.е. запрос был сделан с компьютера или ноутбука, то продолжится выполнение кода и пользователю будет отправлена страница для этих устройств, а если одна из этих функций вернёт true, т.е. будет определено мобильное устройство, то функция header перенаправит запрос на мобильный поддомен. Если же запрос от пользователя направлен на мобильный поддомен (т.е. m.me_site.ru), то вся конструкция будет проигнорирована и пользователю будет отправлена страница для мобильных устройств.

 По сути, вся эта система проверяет вид устройства только при запросе страницы на основном домене и если устройство окажется мобильным, переправляет его на соответствующий поддомен. Так же обратите внимание, что переадресация на мобильный домен осуществляется на ту же страницу за счёт переменной $_SERVER['REQUEST_URI'].

В дальнейшем, при необходимости вывести какой либо элемент на экран только для определённой версии (например, какую-нибудь кнопку или изображение), для этого элемента устанавливается дополнительная конструкция if, определяющая вариант устройства по домену (поддомену) при помощи переменной $_SERVER['SERVER_NAME']:

В результате выполнения этого кода при поступлении запроса на основной домен на страницу будет выведена кнопка "Отправить!", но если запрос будет направлен на поддомен m.my_site.ru, данной кнопки на странице не будет.

Точно по такому же принципу в этом случае создаётся и главный шаблон сайта: в нём прописывается код для обоих вариантов, а в качестве "переключателя" используется приведённая выше конструкция, определяющая вариант устройства по переменной $_SERVER['SERVER_NAME'].

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

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

Так же данный "переключатель" можно установить для вывода на страницу отдельных элементов в зависимости от типа устройства.