Прочее

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

Небольшая статья об определении 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. Но это уже совсем другая статья.

{"time":1561658055459,"blocks":[{"type":"paragraph","data":{"text":"Небольшая статья об определении usaeragent через javascript."}},{"type":"paragraph","data":{"text":"Иногда появляется задача скрыть/ показать какую-то часть страницы для мобильного браузера. Например, в зависимости от типа браузера(useragent) показать блок для просмотра онлайн версии журнала, которую мобильный браузер не может отобразить. Об этом и будет статья в блоге catine."}},{"type":"paragraph","data":{"text":"И тут нам на помощь приходит могучий и мудрый javascript. Нет, никаких сторонних библиотек или махинаций с  back end нам не понадобится, мы просто будем использовать переменную  navigator.userAgent , которая доступна из любой точки js."}},{"type":"paragraph","data":{"text":"Если пройтись по поиску с запросом «Как определить мобильный браузер javascript», то можно будет найти очень интересный js объект, который мы и будем использовать."}},{"type":"code","data":{"code":"var isMobile = { \n\t\tAndroid: function() { \n\t\t\treturn navigator.userAgent.match(/Android/i); \n\t\t}, \n\t\tBlackBerry: function() { \n\t\t\treturn navigator.userAgent.match(/BlackBerry/i); \n\t\t}, \n\t\tiOS: function() { \n\t\t\treturn navigator.userAgent.match(/iPhone|iPad|iPod/i); \n\t\t},\n\t\tOpera: function() { \n\t\t\treturn navigator.userAgent.match(/Opera Mini/i); \n\t\t}, \n\t\tWindows: function() { \n\t\t\treturn navigator.userAgent.match(/IEMobile/i); \n\t\t}, \n\t\tany: function() { \n\t\t\treturn (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); \n\t\t} \n\t};"}},{"type":"paragraph","data":{"text":"И все очень просто, этот объект можно использовать для определения версии мобильного браузера (mobile useragent)."}},{"type":"paragraph","data":{"text":"Теперь напишем небольшую страницу, где будем отображать найден или не найден мобильный браузер у клиента."}},{"type":"paragraph","data":{"text":"Страничка index.html:"}},{"type":"code","data":{"code":"<html>\n<head>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n\t<title>Catine | Проверка браузера</title>\n <link rel=\"shortcut icon\" href=\"http://catine.ru/wp-content/themes/Catinev2/favicon.png\" type=\"image/png\" />\n <link rel=\"shortcut icon\" href=\"http://catine.ru/wp-content/themes/Catinev2/favicon.ico\" />\n <script type=\"text/javascript\" src=\"http://catine.ru/wp-content/themes/Catinev2/js/jquery-2.0.2.min.js\"></script>\n\t<script type=\"text/javascript\" src=\"index.js\"></script>\n</head>\n\t<style type=\"text/css\">\n\tbody{\n\t\twidth: 290px;\n\t\tmargin: 0px auto;\n\t\ttext-align: center;\n\t\tbackground-color: #f5f5f5;\n\t\ttext-shadow: 0px -1px 0px #fff;\n\t}\n\t.logo{\n\t\twidth: 290px;\n\t\theight: 50px;\n\t\tbackground-image: url(\"http://catine.ru/wp-content/themes/Catinev2/img/logo.png\");\n\t\tbackground-repeat: no-repeat;\n\t\toverflow: hidden;\n\t\tmargin: 15px 0px 30px 0px;\n\t\tdisplay: block;\n\t}\n\t</style>\n\t<a href=\"http://catine.ru/\" class=\"logo\"></a>\n\t<div id=\"container\"></div>\n<body>\n</body>\n</html>"}},{"type":"paragraph","data":{"text":"Оговорюсь сразу, что библиотека JQuery здесь используется для работы с DOM-деревом страницы. Конечно можно обойтись без громоздкого фреймворка и работать с элементам через  document.getElementById('container') , но это уже дело привычки."}},{"type":"paragraph","data":{"text":"Далее следует основной javascript файл — inedex.js:"}},{"type":"code","data":{"code":"$(document).ready(function(){\n\tvar isMobile = { \n\t\tAndroid: function() { \n\t\t\treturn navigator.userAgent.match(/Android/i); \n\t\t}, \n\t\tBlackBerry: function() { \n\t\t\treturn navigator.userAgent.match(/BlackBerry/i); \n\t\t}, \n\t\tiOS: function() { \n\t\t\treturn navigator.userAgent.match(/iPhone|iPad|iPod/i); \n\t\t},\n\t\tOpera: function() { \n\t\t\treturn navigator.userAgent.match(/Opera Mini/i); \n\t\t}, \n\t\tWindows: function() { \n\t\t\treturn navigator.userAgent.match(/IEMobile/i); \n\t\t}, \n\t\tany: function() { \n\t\t\treturn (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); \n\t\t} \n\t};\n\tif(isMobile.any())\n\t{\n\t\t$(\"#container\").html(\"Мобильный браузер обнаружен.\");\n\t}\n\telse\n\t{\n\t\t$(\"#container\").html(\"Мобильный браузер не обнаружен.\");\n\t}\n});"}},{"type":"paragraph","data":{"text":"Этот скрипт очень прост и не нуждается в комментариях. Он начинает работать сразу же после загрузки страницы."}},{"type":"paragraph","data":{"text":"Этот способ не подходит для создания мобильной версии сайта, для этого необходимо использовать серверные примочки. Например, в apach это делается через файл *.htaccess. Но это уже совсем другая статья."}}],"version":"2.13.0"}
image

Евгений

Специалист по разработке систем на современных PHP фреймворках.