Как сделать проверку браузера на сайте
В предыдущей статье я рассказывала о том, как можно прописать разные стили для разных браузеров.
Если интересно почитать вот ссылка.
Навигация по статье:
Для чего нужно определять браузер пользователя?
К сожалению не все браузеры одинаково отображают и поддерживают некоторые CSS свойства, к тому же у них немного отличаются алгоритмы расчёта ширины элемента, особенно если используются десятичные значения ширины или шрифта. Помимо этого они могут по разному отображают шрифты (особенно если вы используете у себя на сайте нестандартный шрифт).
Например, в Mozilla Firefox шрифт отображается более жирным, чем в Opera или Chrome, поэтому одна и та же кнопка с одной и той же надписью может иметь разное значение ширины в этих браузерах.
Из за этих особенностей порой бывает сложно добиться одинакового отображения вёрстки во всех браузерах (кроссбраузерности).
Одним из решений данной проблемы является использование так называемых CSS хаков, подробнее о которых я рассказывала в предыдущей статье.
Но у этого решения есть несколько минусов:
- во-первых: для некоторых браузеров практически невозможно подобрать универсальный хук, который бы работал в разных версиях этого браузера;
- во-вторых: даже если сейчас вам удалось добиться отображения нужных вам стилей в определённом браузере с помощью CSS хука, то вы не сможете быть на 100% уверенными в том, что этот хук будет корректно работать в следующих версиях браузера.
В этой статье я расскажу о скрипте определения браузера, который позволит определить браузер пользователя и подключить нужные стили для этого браузера. Это помогает добиться одинакового отображения страницы в разных браузерах, а также адаптировать вёрстку под особенности некоторых из них.
Как работает скрипт для определения браузера?
В самом конце страницы перед закрытием тега мы прописываем скрипт, который считывают определённую информацию из браузера при помощи объекта navigator и метода userAgent и записывает её в определённую переменную (в моём случае «browser_id»)
Далее идёт ряд условий, в которых прописываются варианты для разных браузеров и в зависимости от того какой вариант попал в переменную browser_id в функцию будет возвращаться определённое название браузера.
Как использовать?
Вы можете просто вставить эту строчку сразу после открывающего тега или в секции :
Из-за условного комментария этот скрипт будет загружаться только в IE9 и младше. При желании можете понизить планку до IE8 или IE7, исправив 9 на 8 или 7 соответственно. По этому адресу скрипт будет доступен постоянно, поскольку в таком виде он используется в phpBBex. Но если вас не устраивает подобная зависимость, вы можете скачать архив с исходными файлами, на основе которых вы сможете сделать свою версию.
Как это выглядит?
Пользователи устаревших версий IE увидят стилизованное под IE6 уведомление:
При клике по нему пользователь увидит страницу выбора нового браузера:
Здесь у многих хабравчан должно возникнуть ощущение «я уже где-то это видел». Действительно, это переработанная страница выбора браузера, которую кто-то в 2009 году уже публиковал на Хабре (к сожалению, оригинальный пост не нашёл).
А что насчёт IE8?
На IE8 приходится 5.1% трафика — всё ещё достаточно много, чтобы игнорировать существование такого браузера. Но доля его стремительно падает. Уже не за горами тот самый момент…
А как же старые версии других браузеров?
Как правило, проблемы «значительной доли» устаревших версий не касаются альтернативных браузеров — старые Firefox, Chrome и Opera практически полностью самоустраняются в течение двух-трёх лет после выхода новых версий. Firefox 3.6 был кандидатом на «долгожителя», поскольку многие любители Firefox холодно отнеслись к новому интерфейсу и плотному графику релизов любимого браузера, сознательно оставаясь на старой версии. Прошло немногим больше года после выхода Firefox 4, и сейчас у Firefox 3.6 всего 2.3%. Его доля падает быстрее, чем доли устаревших версий IE.
Очень часто я слышу мнение, что через PHP невозможно узнать, какой браузер у пользователя, поскольку это серверный язык, а не клиентский. На самом деле, это далеко не так. Браузер - это клиент, а любой сервер имеет полное право знать информацию о клиенте, который к нему подключается, то есть о браузере. А как определить браузер через PHP, об этом Вы узнаете из этой статьи.
Вывод будет примерно таким: "Opera/9.80 (Windows NT 6.1; WOW64; U; ru) Presto/2.10.289 Version/12.02", если это Opera, либо таким: "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:16.0) Gecko/20100101 Firefox/16.0", если клиент - это Firefox. И так далее, в любом браузере можно увидеть некое ключевое слово. Благодаря этому ключевому слову, без проблем удаётся однозначно определить браузер:
$user_agent = $_SERVER["HTTP_USER_AGENT"];
if (strpos($user_agent, "Firefox") !== false) $browser = "Firefox";
elseif (strpos($user_agent, "Opera") !== false) $browser = "Opera";
elseif (strpos($user_agent, "Chrome") !== false) $browser = "Chrome";
elseif (strpos($user_agent, "MSIE") !== false) $browser = "Internet Explorer";
elseif (strpos($user_agent, "Safari") !== false) $browser = "Safari";
else $browser = "Неизвестный";
echo "Ваш браузер: $browser";
?>
Вот так легко определить, какой браузер у пользователя через PHP, а дальше можно, например, подгрузить определённые стили для конкретного браузера, или даже его версии.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 26 ):
Часто это спрашивают, а всё потому, что та статья написана о другом, а эта возможность упомянута там вскользь, и люди её просто не видят (как и саму статью). А теперь я буду целенаправленно отправлять сюда пользователей, чтобы максимально подробно давать ответ на данный вопрос.
Таких способов не существует. Ограничения по IP более, чем достаточно. А с куками будет ещё больше проблем у накрутчика. Тут надо понимать, что кто захочет, тот всегда накрутит. Но это вряд ли кому-то будет нужно. А от единичных бездельников, которые проголосуют 5 раз, вместо 1-го, потратив на это время в поиске новых и новых прокси, никакого вреда не будет.
Ну почему у накрутчика с куками будет больше проблем, чем со сменой айпи адреса ? Ведь чтобы айпишник сменить, придется переподключаться, что занимает время, а куки сразу можно потереть в настройках браузера. Лично я сам недавно на одном из сайтов за 7 часов проголосовал 500+ раз, просто выдернув из сайта скрипт голосования и поставив на ночь автокликер, которые переподключал сеть и обновлял скрипт и полетела вся надежность системы голосования к чертям. Все же хочется в будущем себя обезопасить от подобных изъянов.
Вообще не догоняю зачем Вам это нужно то было? И вообще какой от этого смысл. Нечем людям заняться.
Спросил, значит надо ! Например опросник на сайте создать или голосование публичное, например выбор сотрудника года, пример множество. Смысл есть во всем. Моё дело предложить тему для статьи, может свои идеи предложите, чем других критиковать ?
Я Имел ввиду зачем Вам было нужно 500+ раз голосовать за 7 часов? Какой вам от того был толк? Типа спамера?
Аааа, Pardon. Просто там был уже лидер, нужно было его обогнать по голосам, а времени в обрез.
В общем понятно. На будущее пригодятся знания. Спасибо за помощь !
echo "Ваш браузер: $browser"; Тогда уж лучше echo "Ваш браузер: "; или я не прав? Подскажите пожалуйста!
Зачем фигурные скобки? Это же не smarty.
Правильно echo "Ваш браузер: ".$browser !
Та хоч printf("Ваш браузер:%s",$browser); нічого не міняється крім функцій і синтаксису
Михаил! Опера, Сафари и Хром, кажется, работают на одном движке - этот способ в этих браузерах не работает. Или сегодня это уже не так актуально?
Ну,не совсем так.Типы клиентов разные)
В данном примере идёт сравнение имён браузеров и данных $user_agent. Слово "Safari" встречается у Оперы, Хрома и самого Сафари. А Слово "Opera" вообще не найдёт совпадений: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36 OPR/22.0.1471.50 Может в ранних версиях по другому было, но сегодня этот пример не проходит.
Допишите если Internet Explore старше 10 версии, то условие будет таким elseif (strpos($user_agent, "Trident") !== false) $browser = "Internet Explorer 10";
Полностью рабочий вариант по крайней мере для браузеров актуальных на данный момент: $user_agent_browser = $_SERVER["HTTP_USER_AGENT"]; if (strpos($user_agent, "Firefox") !== false) $browser = "Firefox"; elseif (strpos($user_agent, "OPR") !== false) $browser = "Opera"; elseif (strpos($user_agent, "Chrome") !== false) $browser = "Chrome"; elseif (strpos($user_agent, "MSIE") !== false) $browser = "Internet Explorer 7"; elseif (strpos($user_agent, "Trident") !== false) $browser = "Internet Explorer"; elseif (strpos($user_agent, "Safari") !== false) $browser = "Safari"; else $browser = "Неизвестный"; echo "Ваш браузер: $browser";
только не $user_agent_browser = $_SERVER["HTTP_USER_AGENT"]; а $user_agent = $_SERVER["HTTP_USER_AGENT"]; либо дальше везде тоже надо писать $user_agent_browser
$user_agent_browser - это ведь просто переменная, которую Вы создаёте сами, так что в моём варианте, да нужно везде писать $user_agent_browser
Существует достаточно большое количество браузеров, а также их версий. И проблема в том, что одни браузеры позволяют выполнить определённый скрипт, а другие не позволяют. Встаёт вопрос: а как узнать браузер пользователя в JavaScript, чтобы через условие решить: надо выполнять скрипт или нет. И о том, как определить имя и версию браузера пользователя я и напишу в этой статье.
Для таких целей существует объект Navigator, а точнее два его свойства: appName и appVersion. Давайте для начала выведем название браузера пользователю:
document.write("Вы используете браузер " + navigator.appName);
В результате Вы увидите имя браузера пользователя. Также огромное значение оказывает не только сам браузер, но и его версия. И для таких случаев используется свойство appVersion:
document.write("Версия Вашего браузера " + navigator.appVersion);
Свойства appName и appVersion доступны только для чтения (это и логично), поэтому изменить их у Вас не получится. Теперь встаёт вопрос, а как использовать их в операторе IF:
var browser = navigator.appName;
if (browser == "NetScape")
document.write("Тут можно выполнять скрипты для обладателей браузеров NetScape");
Надеюсь, что я ответил на Ваш вопрос: "Как узнать имя и версию браузера в JavaScript".
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 10 ):
И для FFox напишет Netscape
Проблем при определении браузера много, чтобы узнать, что это chrome, нужно анализировать navigator.appVersion. Для других браузеров могут быть другие свойства (appName или appCodeName).
Ну и как это сделать?
Выведите сначала, посмотрите на значение, а дальше используйте функции для работы со строками.
Ну я уже понял как.
Недавно для одного интересного проекта мне потребовалось сделать определение браузера и его версии на PHP. Шаблон был адаптивный (responcive), и надо было подстроить под разные браузеры вывод элементов страницы. Сайт я писал на любимом движке WordPress и тема была сверстана под него. Как всегда недолго думая над задачей полез я в Интернет. Мое было удивление когда я нашел готовый скрипт, который полностью меня устроил в первой десятке выдачи google. Респект и уважуха разработчику и блогеру ко
торый этот скрипт написал и выложил у себя на блоге.
Чем он особо мне понравился, так это тем, что скрипт мог определять браузеры на движке Gecko, а не только основные браузеры (Firefox, Chrome, IE, Opera, Safari), и даже те, которые построены на ядре Trident (Maxthon, Avant Browser, MyIE2), и даже старые версии Оперы, маскирующиеся под IE. Кроме того, скрипт находит и отображает версию браузера.
Автор блога выложил некоторые сведения, которые я также хотел бы выложить себе на сайт.
Теория из слов автора:
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10
Отсюда вытащить браузер и версию просто, не так ли?
Теперь IE 6
Opera 10.61
Opera/9.80 (Windows NT 5.1; U; ru) Presto/2.6.30 Version/10.61
Опера приготовила нам подлянку: название браузера в начале, а версия, как это не странно, в конце.
Safari 5.1
Mozilla/5.0 (Windows; U; Windows NT 6.1; ru-RU) AppleWebKit/533.17.8 (KHTML, like Gecko) Version/5.0.1 Safari/533.17.8
Safari тоже удивляет: через слэш идёт вовсе не номер версии. Номер версии идёт чуть раньше.
Chrome 6.0.427.0
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.1 (KHTML, like Gecko) Chrome/6.0.427.0 Safari/534.1
Хром вытащить легче, хорошо бы ещё не перепутать его с Safari…
(О том, почему все браузеры (кроме Оперы) называют себя Mozilla можно в простой и увлекательной форме почитать здесь.)
Практика из слов автора
Вы уже узнали, какое разнообразие в строке User-agent предлагают всего лишь пять браузеров.
Но в 9 из 10 случаев нас спасёт следующее регулярное выражение:
После этого во втором элементе массива будет лежать название браузера, а в третьем — его версия.
Исключение представляет лишь Safari начиная с версии 3.0 и Opera начиная с версии 10.00.
Для этих браузеров мы пишем:
if ( $ browser == 'Opera' && $ version == '9.80' ) return 'Opera ' . substr ( $ agent , - 5 ) ; // возвращаем версию Оперы в конце строки
И ещё одна строка кода:
Её код целиком:
Вот более полная версия, позволяющая определять экзотические, устаревшие, а также те браузеры, которые построены на основе Firefox и IE:
preg_match ( "/(MSIE|Opera|Firefox|Chrome|Version|Opera Mini|Netscape|Konqueror|SeaMonkey|Camino|Minefield|Iceweasel|K-Meleon|Maxthon)(?:\/| )([0-9.]+)/" , $ agent , $ browser_info ) ; // регулярное выражение, которое позволяет отпределить 90% браузеров
if ( preg_match ( "/Opera ([0-9.]+)/i" , $ agent , $ opera ) ) return 'Opera ' . $ opera [ 1 ] ; // определение _очень_старых_ версий Оперы (до 8.50), при желании можно убрать
preg_match ( "/(Maxthon|Avant Browser|MyIE2)/i" , $ agent , $ ie ) ; // проверяем, не разработка ли это на основе IE
preg_match ( "/(Flock|Navigator|Epiphany)\/([0-9.]+)/" , $ agent , $ ff ) ; // проверяем, не разработка ли это на основе Firefox
if ( $ browser == 'Opera' && $ version == '9.80' ) return 'Opera ' . substr ( $ agent , - 5 ) ; // если браузер определён как Opera 9.80, берём версию Оперы из конца строки
Примеры работы
В таблице приведён результат работы двух функций — в первом столбце браузер, в котором вызывались функции, во втором — ответ функции, учитывающей малоизвестные браузеры, в третьей — результат работы сокращённой функции.
Красным цветом отмечены браузеры, которые функция не смогла определить.
А здесь вы можете проверить работу функций в своём браузере.
Надеюсь, что эти функции будут кому-то полезны.
Удачи.
или на сайте автора:
Еще раз отдельное спасибо автору!
Определяем мобильные браузеры
Еще из комментариев на сайте автора нашел, как определить мобильные устройстка:
Читайте также: