Вариант определения мобильных устройств
Хочу поделиться своей практикой определения типа устройства, будь то мобильный гаджет или компьютер для тонкой настройки CSS и JS.
Сразу хочу уточнить, что данная заметка к MODX особенного отношения не имеет. Это просто JS и CSS, но надеюсь, что все таки будет полезна читателям.
Конечно есть общепринятый способ это @media запросы, направленные в основном на выявление ширины окна и подстройки под это. Но лично для меня встречаются неудобные нюансы. Например 10 дюймовые планшеты имеют вполне себе такой же размер окна как и небольшие ноутбуки. При этом нужно как то понять доступно ли событие Hover или Touch.
Что же делаю я. Нашел для себя замечательную библиотеку detect.js, которая преобразует строку USER AGENT в удобный формат, например CSS классы Mobile и Desktop.
В чем суть.
Определить версию и тип браузера проще всего при помощи JavaScript, имеющий имеет стандартный объект под названием navigator, который содержит данные о браузере пользователя.
Объект navigator имеет много свойств, но в данном случае нас интересует свойство UserAgent — это строка содержит данные о браузере, операционной системе, и многое другое.
Если вы хотите увидеть значение navigator.userAgent, то можете написать следующий простейший код в вашем JS файле со скриптами.
Detect.js может разобрать значение строки в объект JavaScript для удобного восприятия человеком и последующего использования в работе.
Подключаем библиотеку и пишем несколько строк кода в нашем JS файле
Честно говоря не знаю, где можно применить тип операционной системы и браузер, но для себя в работе я определяю тип устройства для дальнейшего использования.
или
И с этим мы можем дальше работать используя различные стили 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.36Detect.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
)Chrome 56 Windows 10Честно говоря не знаю, где можно применить тип операционной системы и браузер, но для себя в работе я определяю тип устройства для дальнейшего использования.
//Определение типа устройства
var user = detect.parse(navigator.userAgent);
var deviceType = user.device.type;
$('body').addClass(deviceType);<body class="Mobile">или
<body class="Desktop">И с этим мы можем дальше работать используя различные стили 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 Номер патча операционной системыМоя заметка не претендует на уникальность, я лишь хочу поделиться собственным опытом и почитать в комментариях о Вашем опыте.
Комментарии: 15
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
А при развороте планшета класс меняется с Landscape на Portrait или нужно перезапускать скрипт через window.resize?
Ну и, вкупе с device.js, конечно, modernizr не бывает лишним, на крупных проектах, требующих хорошей поддержки
И там и там USER_AGENT парсится.
Хотя конечно же признаю полезность готовых решений.
ну и далее используем переменную isMobile как угодно. Способ простой и не закрывает все потребности, но учитывая, что 98% посетителей сейчас — это Android или iPhone/iPad устройства — то для определения устройства посетителя этого вполне хватает.
Вот думаю, есть ли смысл подключать MobileDetect или Detect.js, т.к. до сих пор не сталкивался с проблемами из-за такой реализации.
А в модексе юзаю снипет