Автоматическое определение мобильного браузера: user-agent

Быстрый ответ

Если необходим кратковременный ответ, воспользуйтесь однострочным JavaScript-скриптом:

// Это мобильное устройство или всё же компьютер?
const isMobile = /mobile|tablet|ipad|iphone/i.test(navigator.userAgent);
console.log(isMobile ? "Мобильный браузер" : "Браузер компьютера");

Этот скрипт эффективно определяет большинство мобильных устройств, позволяя быстро адаптировать содержимое веб-страницы.

Детальнее об определении user-agent

Определение user-agent — это некое воплощение услуг консьержа на вашем сайте, исправляющего пользовательский опыт в зависимости от типа браузера. Это дает возможность различать разнообразные устройства и операционные системы, адаптируя подход к каждому посетителю индивидуально.

User-agent против адаптивного дизайна

Адаптивный веб-дизайн, осуществляемый с помощью медиа-запросов CSS3 и мета-тегов viewport, должен быть основой для создания сайтов, которые будут корректно отображаться на всех типах устройств. Добавление проверки user-agent позволит улучшить сайт, расширив его функциональность и удобство использования на различных устройствах.

Подробнее об этом расскажет наш спикер на видео

Эволюция баз данных

Следуйте за цифровыми трендами, поддерживая обновленную базу данных известных user-agents, учитывая стремительное развитие технологий и обновление браузеров.

Принимаем без JavaScript

Пользователей, отключивших JavaScript, немного, но они также заслуживают полноценного использования сайта. Применяйте стратегию с приоритетом мобильных устройств, чтобы обеспечить доступность сайта для всех, вне зависимости от состояния JavaScript.

Улучшаем определение мобильных устройств

Apache на страже

Для определения user-agent на стороне сервера можно использовать переписывающие правила Apache. Изменение файла .htaccess позволит перенаправлять пользователей на мобильную версию сайта или предоставлять адаптированный контент.

Копаем глубже: за границами User-Agent

Не ограничивайтесь проверкой user-agent — обращайте внимание и на другие характеристики устройств и операционных систем:

const isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; // Для поклонников Android
const isIos = /iPad|iPhone|iPod/.test(navigator.platform); // Для преданных Apple

Такие методы обеспечивают более глубокий контроль и точность при определении устройств.

JavaScript navigator.appVersion в действии

Для еще большей точности вы можете воспользоваться следующим кодом:

// Ведь Mobile – это не только техника, но и состояние
const isMobile_2 = navigator.appVersion.indexOf("Mobile") !== -1;

Визуализация

Преобразуем данные в визуальную форму с целью понимания процесса определения устройства пользователя. Представьте себе некий клуб, у входа в который находится портье, играющий роль JavaScript-скрипта. Он проверяет устройства (анализирует строки user-agent), чтобы предложить подходящие визуальные решения:

Портье (🚪): "Можно узнать ваш ID (user-agent)..."

Гости: [📱, 💻, 📱, 🖥️, 📱]

Портье: "О, мобильный пользователь! Вот ваш Пропуск для мобильного. А вы с компьютера? Получите Стандартный Пропуск."

После проверки посетители направляются в соответствующие зоны, где их ожидает оптимальный для их устройств пользовательский опыт:

С мобильным пропуском (🎟️📱): "Добро пожаловать в зону для малых экранов!"
С пропуском для компьютера (🎟️💻): "Присаживайтесь поудобнее в зоне с большими мониторами!"

Некоторые аспекты

Жизнь без JavaScript

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

Читаемость в приоритете

На малых экранах мобильных устройств крупный шрифт критичен для удобства чтения. Следовательно, стоит уделить внимание увеличению шрифта в сочетании с адаптивным масштабированием.

Одна платформа, а не две

Избегайте разработки отдельной мобильной версии сайта. Наилучшим решением будет создание одного адаптивного веб-сайта, который обеспечивает согласованный опыт работы как на десктопе, так и на мобильных устройствах.

Полезные материалы

1. Определение браузера через user agent – HTTP | MDN
2. Определение мобильных браузеров
3. javascript – Определение мобильного браузера – Stack Overflow
4. Медиа-запросы для стандартных устройств | CSS-Tricks
5. Основы адаптивного веб-дизайна
6. GitHub – Mobile-Detect: легковесный PHP класс для определения мобильных устройств
7. Can I use... Таблицы поддержки HTML5, CSS3 и других

Завершение

Двигатель дальнейших улучшений прост: практика ведет к совершенству. И ваши отзывы — это наша лучшая награда! Успешного кодирования!👩‍💻