Головная боль всех 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>Code language: HTML, XML (xml)Ну а далее в основном файле стилей прописать дополнительные стили для блока с классом in-app. Данный код рабочий и стоит на одном из сайтов моих клиентов.
Тестирование верстки и эмуляция userAgent в браузере Google Chrome
Чтобы протестировать работоспособность скрипта который мы создали выше можно либо в ручную проверить, как будет все отображаться на андроиде в facebook и instagram, но если под рукой нету данного девайса то как быть?
К счастью мы можем эмулировать любой useragent прямо в браузере используя инструменты разработчика. В этом мне очень помогает плагин для браузера User-Agent Switcher, который можно найти на просторах инета. Этот чудо плагин позволяет либо выбрать предустановленные User-Agent либо добавить свой.
На этом все, всем успешной верстки!
