Html определить мобильное устройство

Вариант определения мобильных устройств

Хочу поделиться своей практикой определения типа устройства, будь то мобильный гаджет или компьютер для тонкой настройки CSS и JS.

Сразу хочу уточнить, что данная заметка к MODX особенного отношения не имеет. Это просто JS и CSS, но надеюсь, что все таки будет полезна читателям.

Конечно есть общепринятый способ это @media запросы, направленные в основном на выявление ширины окна и подстройки под это. Но лично для меня встречаются неудобные нюансы. Например 10 дюймовые планшеты имеют вполне себе такой же размер окна как и небольшие ноутбуки. При этом нужно как то понять доступно ли событие Hover или Touch.

Что же делаю я. Нашел для себя замечательную библиотеку detect.js, которая преобразует строку USER AGENT в удобный формат, например CSS классы Mobile и Desktop.

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

Объект navigator имеет много свойств, но в данном случае нас интересует свойство UserAgent — это строка содержит данные о браузере, операционной системе, и многое другое.

Если вы хотите увидеть значение navigator.userAgent, то можете написать следующий простейший код в вашем JS файле со скриптами.

console.log(navigator.userAgent);

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Честно говоря не понятно, каким образом можно использовать данную гигантскую строку. Но все станет проще если мы попробуем ее распарсить. В этом нам поможет библиотека Detect.js

Detect.js может разобрать значение строки в объект JavaScript для удобного восприятия человеком и последующего использования в работе.

Подключаем библиотеку и пишем несколько строк кода в нашем JS файле

//Создаем объект 'user', который будет содержать информацию Detect.js //Вызываем detect.parse() с navigator.userAgent в качестве аргумента var user = detect.parse(navigator.userAgent); // Выводим нужные значения в консоли браузера console.log( user.browser.family, user.browser.version, user.os.name )

Как видим все стало гораздо проще и удобнее.

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

//Определение типа устройства var user = detect.parse(navigator.userAgent); var deviceType = user.device.type; $('body').addClass(deviceType);

 И с этим мы можем дальше работать используя различные стили CSS или подключая различные JS методы
 

Ниже приведена таблица всех анализируемых свойств:

Свойство Описание browser.family Имя браузера browser.name Имя браузера и его версия browser.version Полная версия браузер browser.major Основной номер версии браузера browser.minor Дополнительный номер версии браузера browser.patch Номер патча браузера device.family Имя устройства device.name Имя устройства и версия device.version Полная версия устройства device.major Основной номер версии устройства device.major Дополнительный номер версии устройства device.patch Номер патча устройства device.type Тип устройства (например, "Desktop" или "Mobile") device.manufacturer Производитель устройства os.family Название операционной системы os.name Полне имя операционной системы os.version Полная версия операционной системы os.major Основной номер версии операционной системы os.minor Дополнительный номер версии операционной системы os.patch Номер патча операционной системы

Моя заметка не претендует на уникальность, я лишь хочу поделиться собственным опытом и почитать в комментариях о Вашем опыте.

Источник

How To Detect Mobile Device, OS using JavaScript

Hello Devs, In this blog, we are going to learn that how you can detect mobile device or browser or OS using JavaScript and you can redirect the user to the mobile application or to the web application automatically.

Table of content

So without wasting any time, lets get into the tutorial.

1.What is navigator object in JavaScript

To get the bowser details or device details, JavaScript stores these information in the navigator property of window object.
navigator object contains lots of information about the browser, some of the most used/ important information we will see later in this tutorial.

Lets first see what navigator object is.
if you directly want to see how to get the detect mobile and desktop then you can skip this part can click here

navigator object contains information about the browser.
(NOTE: Not all but all major browser support this object)

2.Some of the most important properties are,

1. Clipboard — used to copy something to clipboard and paste it any where (Ex. while making Click to copy)
2. connection
3. language — shows the language of browser.
4. geolocation — Returns a Geolocation object that can be used to locate the user’s position
5. onLine — check whether the browser is online
6. platform — machine type where browser is installed.
7. cookieEnabled — it returns a Boolean value that indicates whether cookies are enabled or not.
8. serviceWorker — mainly used to checks if the browser supports service workers
9. vibrate(time) — make device vibrate if it support that
10. userAgent — will see below
11. userAgentData — will see below

I think this much information about the navigator object is enough to understand what is navigator object and what all information it contains

3.How to detect mobile device or browser or OS.

To get these information we will use the property userAgent , userAgentData of navigator object.

navigator.userAgent
userAgent will give you the information of lot of things like device name, browser name, OS version but the information returned by browser is not much understandable.
So, we can understand these returned information from the hack.

to get OS version and name you can follow the below hack,

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");> 

to check mobile device info you can follow below hack,

 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); >); > 

userAgent is much more complex to get these details.
So we have one more property i.e.
navigator.userAgentData
This gives the information about browser and mobile detection in 1 line.

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

NOTE: Both of these 2 ways are not recommended to be use in the production.

So lets now see the best way to do so,

4.Better way is,

using matchMedia
it gives you more flexibility to decide that after what screen size you want to deal it as mobile or desktop and lot of other info,
please check official doc from MDN, MDN — Media Query
MDN- Media Query Features
About Pointer

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 also gives you the right to let you choose that after what screen-size you want to treat the device as Mobile(same as CSS Media Query) and its much more flexible than navigator object.

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

we can also use window and screen object achieve this, but these are the older way and much complicated in bigger applications.

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

Thank you for reading this far. This is a brief introduction on How to Detect Mobile Screen & OS using JavaScript .
If you find this article useful, like and share this article. Someone could find it useful too.

If you find anything technically inaccurate please feel free to comment below.

Источник

Проверка на использование мобильного устройства в JavaScript

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

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

Обнаружение пользовательского агента

Один из способов проверки использования мобильного устройства — это проверка строки пользовательсого агента.

Это далеко не лучший способ проверить, поскольку строки пользовательского агента могут быть легко подделаны. Тем не менее, это все еще универсальный способ проверить, какое устройство используется пользователем. Чтобы получить строку пользовательского агента, мы можем использовать свойство navigator.userAgent.

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

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) //.
>

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

Проверка размер экрана

Мы также можем проверить размер экрана устройства, с которого пользователь загружает веб-приложение. Однако учтите, что эта проверка сработает также и при ручном уменьшении окна браузера пользователем на ПК.

Например, мы можем написать следующее:

const isMobile = window.matchMedia(«only screen and (max-width: 760px)»).matches;

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

Проверка наличия сенсорных событий

Мы также можем проверить наличие сенсорных событий на устройстве в нашем коде JavaScript.

Например, мы можем написать:

const isMobile = (‘ontouchstart’ in document.documentElement && navigator.userAgent.match(/Mobi/));

Если событие ontouchstart доступно в браузере, то, вероятно, это мобильное устройство, поскольку большинство мобильных устройств имеют сенсорные экраны.

Свойство navigator.platform

Свойство navigator.platform также содержит строку пользовательского агента. И этот способ более надежен, чем свойство navigation.userAgent.

Например, мы можем использовать его, написав:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) // .
>

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

Создано 17.11.2022 10:40:42

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник