Вы когда-нибудь хотели реализовать функцию для определенной платформы или устройства? Например, показать экран или какой-либо контент только мобильным пользователям или выполнить другое действие в зависимости от устройства пользователя.
Я обычно сталкиваюсь с контентом на сайтах, который явно предназначен для мобильных пользователей, только во время просмотра на компьютере.
User-Agent может помочь в этой ситуации.
MDN определяет пользовательский агент как
Заголовок запроса User-Agent представляет собой характеристическую строку, которая позволяет серверам и одноранговым узлам сети идентифицировать приложение, операционную систему, поставщика и/или версию запрашивающего пользовательского агента.
Общий формат строки пользовательского агента выглядит следующим образом:
Мозилла/5.0 (<system-information>) <platform> (<platform-details>) <extensions>
Обнаружить устройство пользователя
Чтобы узнать, находится ли пользователь на мобильном телефоне, найдите «Mobi» в строке пользовательского агента, как вы можете видеть в примере ниже.
Пример выше приводит к
Демонстрационный пример на настольном устройстве
Демонстрационный пример на мобильном устройстве
Протестируйте в своем браузере
Чтобы проверить это в своем браузере, откройте инструменты разработчика и щелкните значок «переключить устройство». Обновите страницу, чтобы изменения вступили в силу
Практический пример
Вот практический пример этого в моем приложении React.
Я использовал это в федеративном входе
Вывод
Очевидно, вы можете сказать, что это не предназначено для замены медиа-запросов, однако это может быть очень полезно в ваших проектах. Медиа-запросы в основном используются для адаптивных страниц, тогда как этот метод предназначен для функций или контента, специфичных для устройства. Это в основном полезно, когда вы хотите, чтобы ваше мобильное приложение вело себя иначе, чем настольная версия. Вы можете использовать это, чтобы дать мобильным пользователям опыт работы с приложением, особенно при работе с прогрессивными веб-приложениями.
