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

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

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

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

var isMobile = { 
    Android: function() { 
        return navigator.userAgent.match(/Android/i); 
    }, 
    BlackBerry: function() { 
        return navigator.userAgent.match(/BlackBerry/i); 
    }, 
    iOS: function() { 
        return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
    },
    Opera: function() { 
        return navigator.userAgent.match(/Opera Mini/i); 
    }, 
    Windows: function() { 
        return navigator.userAgent.match(/IEMobile/i); 
    }, 
    any: function() { 
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); 
    } 
};

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

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

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

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Catine | Проверка браузера</title>
    <link rel="shortcut icon" href="http://catine.ru/wp-content/themes/Catinev2/favicon.png" type="image/png" />
    <link rel="shortcut icon" href="http://catine.ru/wp-content/themes/Catinev2/favicon.ico" />
    <script type="text/javascript" src="http://catine.ru/wp-content/themes/Catinev2/js/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
    <style type="text/css">
    body{
        width: 290px;
        margin: 0px auto;
        text-align: center;
        background-color: #f5f5f5;
        text-shadow: 0px -1px 0px #fff;
    }
    .logo{
        width: 290px;
        height: 50px;
        background-image: url("http://catine.ru/wp-content/themes/Catinev2/img/logo.png");
        background-repeat: no-repeat;
        overflow: hidden;
        margin: 15px 0px 30px 0px;
        display: block;
    }
    </style>
    <a href="http://catine.ru/" class="logo"></a>
    <div id="container"></div>
<body>
</body>
</html>

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

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

$(document).ready(function(){
    var isMobile = { 
        Android: function() { 
            return navigator.userAgent.match(/Android/i); 
        }, 
        BlackBerry: function() { 
            return navigator.userAgent.match(/BlackBerry/i); 
        }, 
        iOS: function() { 
            return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
        },
        Opera: function() { 
            return navigator.userAgent.match(/Opera Mini/i); 
        }, 
        Windows: function() { 
            return navigator.userAgent.match(/IEMobile/i); 
        }, 
        any: function() { 
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); 
        } 
    };
    if(isMobile.any())
    {
        $("#container").html("Мобильный браузер обнаружен.");
    }
    else
    {
        $("#container").html("Мобильный браузер не обнаружен.");
    }
});

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

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