Рубрики
Без рубрики

Как обнаружить мобильное устройство, ОС с использованием javaScript

Привет, разработчики, В этом блоге мы узнаем, как вы можете обнаружить мобильное устройство или браузер или … Tagged с WebDev, JavaScript, новичками.

Привет, разработчики,

В этом блоге мы узнаем, что вы можете обнаружить мобильное устройство, браузер или ОС, используя JavaScript, и вы можете автоматически перенаправить пользователя на мобильное приложение или веб -приложение.

Таблица содержания

  1. Что такое объект Navigator в JavaScript
  2. Свойства объекта Navigator
  3. Как обнаружить мобильное устройство, браузер или ОС
  4. Как обнаружить мобильное устройство, браузер или ОС в производстве

Так что, не тратя впустую, давайте перейдем к учебному пособию.

1. Что такое объект Navigator в JavaScript

Чтобы получить данные Баузера или данные устройства, JavaScript хранит эту информацию в Навигатор свойство окно объект. Навигатор Объект содержит много информации о браузере, некоторую из наиболее используемой/важной информации, которую мы увидим позже в этом уроке.

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

Навигатор Объект содержит информацию о браузере. (Примечание: не все, кроме всех основных браузеров, поддерживают этот объект)

2. Некоторые из наиболее важных свойств –

  1. Буфер обмена – используется для копирования чего -либо в буфер обмена и вставить его в любом месте (например, нажмите, чтобы копировать)
  2. связь
  3. Язык – Показывает язык браузера.
  4. Геолокация – Возвращает объект геолокации, который можно использовать для поиска позиции пользователя
  5. онлайн – Проверьте, является ли браузер в Интернете
  6. Платформа – Тип машины, где установлен браузер.
  7. cookieEnabled – Он возвращает логическое значение, которое указывает, включены ли файлы cookie или нет.
  8. ServiceWorker – В основном используется для проверки, поддерживает ли браузер работников обслуживания
  9. Вибрация (время) – заставить устройство вибрировать, если оно поддерживает это
  10. Пользователь Агент – увидит ниже
  11. userAgentData – увидит ниже

Я думаю, что этого большого количества информации о объекте Navigator достаточно, чтобы понять, что такое Навигатор объект и какую информацию он содержит

Теперь давайте посмотрим

3. Как обнаружить мобильное устройство, браузер или ОС.

Чтобы получить эту информацию, мы будем использовать свойство пользователь , userAgentData объекта Navigator.

Navigator.useragent Пользователь Агент Даст вам информацию о множестве таких вещей, как имя устройства, имя браузера, версию ОС, но информация, возвращаемая браузером, не очень понятна. Таким образом, мы можем понять эту возвращенную информацию от взлома.

Чтобы получить версию и имя ОС, вы можете следить за взломом ниже,

if (window.navigator.userAgent.indexOf("Windows NT 10.0")!= -1) 
{console.log("OS is Windows 10");}

if (window.navigator.userAgent.indexOf("Windows NT 6.3") != -1) 
{console.log("OS is Windows 8.1");}

if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1) 
{console.log("OS is Windows 8");}

if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1) 
{console.log("OS is Windows 7");}

if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1) 
{console.log("OS is Windows Vista");}

if (window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) 
{console.log("OS is Windows XP");}

if (window.navigator.userAgent.indexOf("Windows NT 5.0") != -1) 
{console.log("OS is Windows 2000");}

if (window.navigator.userAgent.indexOf("Mac") != -1) 
{console.log("OS is Mac/iOS");}

if (window.navigator.userAgent.indexOf("X11") != -1) 
{console.log("OS is UNIX");}

if (window.navigator.userAgent.indexOf("Linux")!= -1) 
{console.log("OS is Linux");}

Чтобы проверить информацию о мобильном устройстве, вы можете следовать ниже взлома,

 function detectMobile() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

Пользователь Агент гораздо сложнее получить эти детали. Итак, у нас есть еще одна собственность, то есть NAVIGATOR.USERAGENTDATA Это дает информацию о браузере и мобильном обнаружении в 1 линии.

navigator.userAgentData.mobile; //returns true or false, depending on the condition

Примечание : Оба эти 2 способа не рекомендуются использовать в производстве.

Итак, давайте теперь увидим лучший способ сделать это,

4. Благодарный путь,

используя Matchmedia Это дает вам большую гибкость, чтобы решить, что после того, какой размер экрана вы хотите рассказать о нем как на мобильном или рабочем столе, и много другой информации, Пожалуйста, проверьте официальный документ от MDN, MDN – Media Query MDN- СМИ ФУНКЦИИ Запрос О указателе

function DetectDevice() {
    let isMobile = window.matchMedia || window.msMatchMedia;
    if(isMobile) {
        let match_mobile = isMobile("(pointer:coarse)");
        return match_mobile.matches;
    }
    return false;
}

DetectDevice() //return true if mobile, and return false if desktop

MatchMedia также дает вам право позволить вам выбрать это после того, какой размер экрана вы хотите относиться к устройству как мобильного (так же, как CSS Media Query), и оно гораздо более гибким, чем Навигатор объект.

if (window.matchMedia("only screen and (max-width: 760px)")) {  
  //do something you want to for the screen size less than 760
}

Мы также можем использовать окно а также экран Объект достигает этого, но это более старый и гораздо сложный в больших приложениях.

if(window.innerWidth > 768){//do something}
if(screen.width > 768){//do something}

Спасибо, что прочитали это далеко. Это краткое введение в Как обнаружить экран мобильного телефона и ОС с помощью JavaScript Анкет Если вы найдете эту статью полезной, например, и поделитесь этой статьей. Кто -то тоже мог бы найти это полезным.

Если вы найдете что -то технически неточное, пожалуйста, не стесняйтесь комментировать ниже.

Надеюсь, это хорошее и информативное чтение для вас. Посетите https://www.capscode.in/blog УЗНАТЬ БОЛЬШЕ… Увидимся в моей следующей статье в блоге, позаботьтесь!

Спасибо @capscode

Оригинал: “https://dev.to/capscode/how-to-detect-mobile-device-os-using-javascript-4l9j”

Читайте ещё по теме: