Доброго времени суток. 🙂
Сегодня, хочу показать вам jQuery скрипт, который будет определять открыт ли сайт на мобильном устройстве или на десктопе. Если вы занимаетесь версткой то знаете что такое адаптивная верстка, отображение контента на десктопе и на мобильном устройстве, что дизайн сайта, а в следствии и его верстка должны рассчитываться так, чтобы сайт отображался корректно и на компьютерах,ноутбуках и на мобильных устройствах.
Для формирования правильного отображения сайта и его корректного отображения, используется CSS. Вся адаптация совершается с помощью определенных параметров, о которых знает каждый верстальщик, останавливаться на которых мы не будем. При верстке, часто используются скрипты, для определенных анимацией, эффектов, появления или исчезновения элементов и тд. бывает так, что применение чего-то подобного, очень красиво смотрится в полноценной версии сайта, но на мобильном отвлекает или вообще мешает. Стилями CSS, можно скрыть много элементов, но иногда простое скрытие не помогает, нужно именно отменить действие скрипта.
Именно для этого существует скрипт, который и помогает решить подобные задачи. Носит название он - Current Device. Суть данного скрипта в том, что он добавляет на страницу классы, в зависимости от того, на каком устройстве просматривается сайт. Можете перейти на страницу с примером и посмотреть как это работает.
В примере можете протестировать страницу файрбагом. Выбрать разные устройства. Чтобы добавлялся соответственный класс, нужно перезагружать страницу. Как видно на странице примера список классов, что могут быть добавлены. Соответствующий класс присваивается тегу <html>. Выглядит это примерно так:
Скачать архив с скриптом, можно по ссылке ниже:
На странице примера указаны следующие параметры и классы к ним, давайте их разберем.
В моей практике, данный скрипт выручал меня несколько раз ,в основном благодаря классам .mobile и .desktop. Скорее всего и вам именно они и понадобятся. Как и говорил в начале статьи, данные классы не для CSS, хотя и там можно их использовать. Эти классы скорее для скриптов, когда нужно заставить работать скрипт, только при наличии класса на странице. Примерная функция выглядит так:
$('.mobile .block').click(function(){
//Сюда код функции для мобильного устройства
});
В данном случаи функция сработает если вы нажали на элемент с классом .block на мобильном устройстве. Для ПК такая функция будет аналогична, но с классом .desktop.
$('.desktop .block').click(function(){
//Сюда код функции для компьютера
});
Таким образом можете применять работу разных скриптов в зависимости от устройства. Сам скрипт можете скопировать с файла current-device.js и добавить в свои файлы или подключить отдельно. Как это лучше сделать, можете прочитать в статье Как и где подключить скрипт?.
На этом все, спасибо за внимание. 🙂