Как определить с какого устройства открыт сайт

Самым простым способом является анализ строки User-Agent’a — это специальный заголовок, который передаётся браузером устройства вместе с любым запросом.

Сразу рассмотрим на примере:

text
1Запрос с айфона из Safari:
2Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1
3
4Запрос с комьютера из Google Chrome:
5Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
6

Из этой строки можно достать информацию об устройстве пользователя, его операционной системе и браузере.

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

javascript
1const isMobile = () => /Mobi|Android/i.test(navigator.userAgent)
2
3if (isMobile()) {
4  console.log("Мобильное устройство");
5} else {
6  console.log("Десктопное устройство");
7}
8

Выше достаточно упрощённая версия кода, просто чтобы передать основную идею.

Пригодиться это может в нескольких кейсах:

• для изменения вёрстки под особенности устройства
• для сбора аналитики
• подключение и использование специфичных API (геолокация, сенсорные жесты, вибрация и пр.)
• ну и точно что-то ещё, о чём я мог забыть