Как определить тип устройства пользователя с помощью JavaScript

Определение типа устройства пользователя является важной задачей для веб-разработчиков, поскольку это позволяет адаптировать контент и функциональность сайта под различные устройства и их особенности. В этой статье мы рассмотрим, как определить тип устройства пользователя с помощью JavaScript.

Разработка на Java — востребованное направление, такие специалисты будут нужны на рынке еще долго. На курсе «Java-разработчик» от Skypro освоить профессию можно с нуля за 11 месяцев, даже если вы гуманитарий и ничего не знаете об IT. Программа составлена от простого к сложному и адаптирована для новичков. Преподаватели — практикующие специалисты из крупных компаний: «Сбер», «Самокат» и других.

Навигатор userAgent

Один из способов определить тип устройства пользователя — использовать свойство navigator.userAgent. Это строка, которая содержит информацию о браузере и операционной системе пользователя.

const userAgent = navigator.userAgent;
console.log(userAgent);

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

Использование библиотеки

Другой подход — использовать сторонние библиотеки, которые специализируются на определении устройств. Одна из таких библиотек — Device.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/device.js/0.2.7/device.min.js"></script>

console.log(device.mobile()); // true if mobile device
console.log(device.tablet()); // true if tablet device
console.log(device.desktop()); // true if desktop device

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Самостоятельная реализация определения устройства

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

function getDeviceType() {
  const userAgent = navigator.userAgent.toLowerCase();
  const isMobile = /mobile|iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(userAgent);

  if (isMobile) {
    return "mobile";
  } else {
    return "desktop";
  }
}

console.log(getDeviceType()); // "mobile" or "desktop"

Этот пример основан на проверке userAgent на наличие ключевых слов, которые указывают на мобильные устройства.

🚨 Обратите внимание, что подобные методы также не гарантируют 100% точности, и лучше всего использовать их в сочетании с адаптивным дизайном и медиа-запросами для обеспечения максимальной совместимости с различными устройствами.

Освойте Java на курсе онлайн-университета Skypro. Учебе нужно будет уделять всего 10 часов в неделю: сможете совмещать с работой и личными делами. Вас ждут 440 часов теории и практики, мастер-классы с реальными рабочими задачами, опытные преподаватели, кураторы и наставники. За время обучения сделаете два полноценных проекта для портфолио и множество домашних заданий, чтобы отработать навыки.

Заключение

Теперь вы знаете несколько способов определения типа устройства пользователя с помощью JavaScript. Они могут быть полезными при создании адаптивных и удобных для пользователя сайтов и приложений.

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

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее