Определить тип устройства ПК, телеф, планшет, ориентацию экрана и ОС за счет device.js

В веб разработке все чаще приходится учитывать мобильные устройства, чтобы подстроить CSS и javascript-ы под нужды пользователей. Рассмотрим отличный скрипт device.js, который позволяет менять CSS и поведение всего сайта в зависимости от того устройства, через которое мы на него зашли.

Данный скрипт совершенно бесплатен и его стали использовать многие разработчики в современных проектах. Он имеет очень маленький вес - всего 8кб и совершенно не нагружает сайт. Разберем более подробно возможности device.js.

Данный скрипт может:
1. Определить тип устройства (ПК, телефон или планшет).
2. Узнать ориентацию экрана: горизонтальная (альбомная) или вертикальная (портретная).
3. Определить тип Операционной системы устройства (iphone, android, windows, iOS и т.д.)

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

Чтобы установить скрипт, сначала удостоверьтесь, что у вас используется JQuery библеотека на сайте. После нее подключите device.js. Скачать его вы можете по ссылке:

Теперь о том, какие команды надо использовать для работы со скриптом:

<script>
//Тип устройства
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');
</script>

В данном примере эти проверки делают сканирование на тип устройства, его ОС и ориентацию экрана. Результаты проверки вы увидите в виде алертов.