Определяем UserAgent in-app браузера Instagram и Facebook

check in-app browser useragent

Головная боль всех web-разработчиков – старые браузеры, которые криво отображают HTML код, однако в этой заметке я пишу о так называемых in-app браузерах, а конкретнее об Facebook и Instagram и их in-app браузеры.

Когда пользователь социальной сети нажимает на ссылку в чьем-то профиле, то она открывается по умолчанию во встроенном браузере социалки. И бывает что верстка в них плывет, как это было у меня. Дело еще осложнялось тем, что в тех же социалках на iOS все было хорошо, а в Android все плохо.

Чтобы решить проблему необходимо было написать небольшой js который бы определял на каком устройстве открыт сайт и в зависимости от этого добавлял бы нужные стили. В этом нам поможет UserAgent.

User agent — это клиентское приложение, использующее определённый сетевой протокол. Термин обычно используется для приложений, осуществляющих доступ к веб-сайтам, таким как браузеры, поисковые роботы (и другие «пауки»), мобильные телефоны и другие устройства. При посещении веб-сайта клиентское приложение обычно посылает веб-серверу информацию о себе.

Wikipedia

Как отследить юзерагент Android, Facebook и Instagram?

Для начала нужно разобраться по каким кодам мы будем отслеживать userAgent, итак поехали:

  • Android – Android
  • BlackBerry – BlackBerry
  • iOS – iPhone|iPad|iPod
  • Opera – Opera Mini
  • Windows – IEMobile
  • Instagram – Instagram
  • Facebook – FBAV для андроида и FBAN для iOS

Итак, моя задача добавить класс in-app блоку с классом hex только если сайт просматривается на Андроиде и только если это in-app браузер от Facebook или Instagram. Пишем сам скрипт-детектор:

<script>
    var str = navigator.userAgent;
    var ins = str.indexOf('Instagram');
    var android = str.match(/Android/i);
    var fcb = str.indexOf('FBAV');
    if ((android) && ((fcb != -1) || (ins != -1)) ) {
      jQuery('.hex').addClass(' in-app ');
    };
</script>

Ну а далее в основном файле стилей прописать дополнительные стили для блока с классом in-app. Данный код рабочий и стоит на одном из сайтов моих клиентов.

Тестирование верстки и эмуляция userAgent в браузере Google Chrome

Чтобы протестировать работоспособность скрипта который мы создали выше можно либо в ручную проверить, как будет все отображаться на андроиде в facebook и instagram, но если под рукой нету данного девайса то как быть?

К счастью мы можем эмулировать любой useragent прямо в браузере используя инструменты разработчика. В этом мне очень помогает плагин для браузера User-Agent Switcher, который можно найти на просторах инета. Этот чудо плагин позволяет либо выбрать предустановленные User-Agent либо добавить свой.

На этом все, всем успешной верстки!

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

12 + = 20

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: