JavaScript Как определить мобильный браузер
 

JavaScript Как определить мобильный браузер

3 мая 2014 3:25 Категории: Программирование

Небольшая статья об определении usaeragent через javascript.

Иногда появляется задача скрыть/ показать какую-то часть страницы для мобильного браузера. Например, в зависимости от типа браузера(useragent) показать блок для просмотра онлайн версии журнала, которую мобильный браузер не может отобразить. Об этом и будет статья в блоге catine.

И тут нам на помощь приходит могучий и мудрый javascript. Нет, никаких сторонних библиотек или махинаций с  back end нам не понадобится, мы просто будем использовать переменную  navigator.userAgent , которая доступна из любой точки js.

Если пройтись по поиску с запросом «Как определить мобильный браузер javascript», то можно будет найти очень интересный js объект, который мы и будем использовать.

И все очень просто, этот объект можно использовать для определения версии мобильного браузера (mobile useragent).

Теперь напишем небольшую страницу, где будем отображать найден или не найден мобильный браузер у клиента.

Страничка index.html:

Оговорюсь сразу, что библиотека JQuery здесь используется для работы с DOM-деревом страницы. Конечно можно обойтись без громоздкого фреймворка и работать с элементам через  document.getElementById('container') , но это уже дело привычки.

Далее следует основной javascript файл — inedex.js:

Этот скрипт очень прост и не нуждается в комментариях. Он начинает работать сразу же после загрузки страницы.

Результат работы скрипта

Этот способ не подходит для создания мобильной версии сайта, для этого необходимо использовать серверные примочки. Например, в apach это делается через файл *.htaccess. Но это уже совсем другая статья.