Скрипт device.js помогающий определить тип устройства, его ориентацию и ОС
При создании сайтов периодически требуется определять тип устройства, его раскладку (альбомную или книжную), а иногда и его ОС, с которого зашел пользователь. Делается это для разных, целей, например, я таким образом, отключал скрипты, которые должны работать только на десктопной версии сайта.
Причин использования device.js, а именно так называется этот скрипт может быть много, но если он существует — значит без него не обойтись в современной разработке.
Итак, данный скрипт не хитрым способом может определить, что у вас за устройство, например, планшет, смартфон или ПК. Причем если это мобильные устройства, он определяет их ориентацию и версию ОС. Демонстрация кода выше наглядно это показывает.
Синтаксис кода
//Тип устройства
if(device.desktop()) alert(‘ПК’);
if(device.tablet()) alert(‘Планшет’);
if(device.mobile()) alert(‘Смартфон’);
//Ориентация экрана
if(device.landscape()) alert(‘Альбомная (в ширину)’);
if(device.portrait()) alert(‘Портретная (в высоту)’);
//ОС устройства
if(device.ios()) alert(‘iOS’);
if(device.ipad()) alert(‘ipad’);
if(device.iphone()) alert(‘iphone’);
if(device.ipod()) alert(‘ipod’);
if(device.android()) alert(‘android’);
if(device.windows()) alert(‘windows’);
if(device.blackberry()) alert(‘blackberry’);
if(device.fxos()) alert(‘fxos’);
Как вы видите скрипт сравнивает условия и если что-то совпадет, в данном случае выводит alert и значение. Вместо него вы можете поставить любую свою функцию. Помните, что devise.js использует библиотеку jQuery. Сам скрипт мало весит и удобен в использовании.
Как определить текущую операционную систему с Node.js
Я пишу пару сценариев оболочки для использования при разработке на платформе. У нас есть разработчики как для Mac, так и для Windows. Есть ли переменная, которую я могу проверить в Node для запуска файла .sh в одном экземпляре и .bat в другом?
Переменная для использования будет process.platform
На Mac переменная возвращается darwin . В Windows возвращается win32 (даже в 64-битной версии ).
Я просто установил это в верхней части моего jakeFile:
Windows возвращается ‘win32’ , даже в 64-битных операционных системах. т.е. process.platform === ‘win32’ достаточно
Я проверил os.platform и process.platform, и они одинаковы для окон и Mac. Я буду использовать process.platform, так как он не требует включения библиотеки.
В то время как сравнение строк process.platform === ‘win32’ кажется более кратким, чем регулярное выражение, и, очевидно, быстрее. Регулярное выражение, которое опубликовал Mauvis, похоже, является лучшей проверкой качества . Если бы Node / Windows каждый решил вернуть win64, winARM и т. Д. Или что-то еще, тонна кода сломалась бы при сравнении строк. Все, что мы ищем — это Windows или нет. Не арка. Я голосую за регулярное выражение в это время после того, как некоторое время использовал сравнение строк, регулярное выражение чувствует себя более безопасным.
@AndrewTFinnell: Win32 на самом деле не означает «Windows на x86» — Windows на x64, ARM или даже Itanium — это Win32, потому что Win32 — это имя API, независимо от того, на каком процессоре он работает. Таким образом, архитектура не имеет ничего общего с именем Win32. Я бы сказал, что проверка регулярных выражений более опасна, потому что какая-то другая несовместимая платформа может предположительно начать с символов «победа» в какой-то момент в будущем.
В Node.js v6 (и выше) есть специальный os модуль, который предоставляет ряд утилитарных методов, связанных с операционной системой.
На моем компьютере с Windows 10 он сообщает следующее:
Вы можете прочитать полную документацию здесь: https://nodejs.org/api/os.html#os_os_type
Это работает, но только для выполнения кода на стороне сервера, оно не дает платформу клиентского кода. Только платформа сервера, выполняющая код. Я попробовал это с BrowserStack, и он дает только операционную систему экземпляра Docker Container, который является бегуном, а не экземпляр браузера, работающий на BrowserStack, который может быть iOS или Android, или Windows или OSX.
Определение браузера и операционной системы пользователя
Нижеприкрепленный JS скрипт позволяет делать 3 полезные вещи:
- определять, из какого браузера пользователь зашел на ваш сайт
- версию браузера
- операционную систему пользователя
Пример работы скрипта:
ну наконец-то — долго искал и пробовал на денвере огромное количество скриптов на php и js, и только этот скрипт нормально работает. Нехватает конечно еще и определения версии браузера, а так вполне норм. Спасибо!!
Всегда пожалуйста! На счет версии браузера. Вы можете дополнить этот скрипт, обработав содержимое «navigator.userAgent». Либо сделать это отдельно от скрипта. Просто выведите в консоли console.log(navigator.userAgent) и вытащите оттуда версию браузера.
Работа с браузером
Как говорилось в одной из прошлых тем, BOM представляет браузер в виде объектов и позволяет работать с браузером. Он позволяет языку JavaScript определить браузер и узнать о нём различную информацию, а таже открывать новые страницы и вкладки.
Метод window.open() открывает в браузере новую вкладку и загружает в неё страницу с указанным в параметрах адресом.
window.open (URL, имя, параметры окна);
URL — адрес страницы, которая должна быть загружена
имя — имя вкладки. Используется для взаимодействия со страницей, открывшей вкладку
параметры окна — строка, содержащая параметры нового окна
Обязателен только первый параметр.
Когда этот метот создавался, то он открывал новое окно браузера. Но современные браузеры, в основном, открывают именно вкладку. Хотя есть возможность и создать новое окно.
В работе данного метода есть ограничение — он срабатывает, если запускается в результате действий пользователя. Если он запускается автоматически без участия пользователя, то браузеры обычно блокируют всплывающее окно. Это делается для того, чтобы не загружались различные нежелательные страницы.
Создадим страницу и откроем из неё новую вкладку:
Чтобы открыть новое окно, а не вкладку, нужно указать параметры окна. Их достаточно много, но некоторые работают не во всех браузерах. Поэтому я назову только основные.
left — смещение левого края окна относительно левого края экрана
top — смещение верхнего края окна относительно верхнего края экрана
width — ширина окна
height — высота окна
menubar — меню браузера
toolbar — панель навигации
location — адресная строка
resizable — возможность изменения размеров
scrollbars — полосы прокрутки
Смещение и размеры окна указаваются в пикселях. Существует ограничение на минимальные размеры. Для остальных параметров указываются значения yes или no. Скрыть адресную строку можно не во всех браузерах. Параметры окна перечисляются через запятую без пробелов.
Объект location осуществляет доступ к URL-адресу страницы. Пример:
Если запустить страницу на обычном компьютере, то метод просто выведет путь к файлу страницы. Вместо символов русского алфавита в некоторых браузерах может быть длинный непонятный текст. Именно такой вид имеют адреса, содержащие русские буквы.
Чтобы загрузить в текущую вкладку новую страницу, можно указать объекту location адрес этой страницы:
Объект navigator позволяет определить браузер и операционую систему. Свойство appName содержит имя браузера, а appVersion версию браузера. Однако, современные браузеры работают таким образом, что с помощью этих свойств невозможно получить точные данные о браузере. Есть свойство userAgent , которое возвращает сложную строку и из неё в дальнейшем можно получить браузер и версию.
Свойство platform возвращает информацию об операционной системе.
Добавим код, который определяет браузер и операционную систему и выводит эти данные на страницу:
Javascript узнать операционную систему компьютера
В данном посте хочу поделится с Вами одним из способов определения платформы на JavaScript пользователя, который перешел на ваш ресурс. Определить версию и тип браузера проще всего при помощи JavaScript. JavaScript имеет стандартный объект под названием navigator, который содержит данные о браузере пользователя.
Для начала мы создадим массив объектов устройств с их платформой.
После нам необходимо написать функцию, которая будет определять свойства пользователя перешедшего на наш сайт. Тут нам поможет navigator. Объект navigator имеет много свойств, но в данном случае нас интересует свойство. UserAgent — это строка содержит данные о браузере, операционной системы, и многое другое.
В функции getPlatform(), мы пробегаем по массиву userDeviceArray цыклом и проверяем условием имеется ли в нашем массиве та платформа, которую нам определил navigator.userAgent.
ПРИМЕЧАНИЕ. Определение типа браузера при помощи JavaScript не является надежным. JavaScript может быть отключен пользователем или userAgent может быть подменен.
