Велосипед с электроприводом вместо рейсового автобуса.
Хочу поделиться своим методом адаптации скриптов jQuery (сам привык писать скрипты на jQuery, но разницы нет, все описанное верно и для чистого javascript) параллельно адаптации веб-верстки.
Для адаптации под различные разрешения экранов и различные устройства используют медиа-запросы в CSS. Допустим у нас заложена адаптация нашей верстки под 2 диапазона: от 0 до 479 пикселей и до 800 пикселей.
@media screen and (max-width: 800px) { /* CSS */ } /* И */ @media screen and (max-width: 479px) { /* CSS */ } Мы хотим использовать различную анимацию и/или запросы к серверу в зависимости от размера экрана. Т.е. нам необходимо параллельно срабатыванию меди-запроса из CSS реагировать в скриптах javascript. Для этого существует, как минимум, 3 способа.
Академический. Специальный метод javascript: window.matchMedia, определяющий срабатывание медиа-запроса, аналогичного CSS:
var mql = window.matchMedia('all and (max-width: 479px)'); if (mql.matches) { // размер окна 479px или меньше } else { // нет, размер окна более 479px } Минусом данного метода считаю наличие явного указания диапазона разрешения экрана в 2-х местах: CSS и javascript. При изменении диапазона в CSS можно забыть поменять его в javascript, в результате мы получим баг в работе сайта, при определенной ширине окна верстка адаптируется, а соответствующая ей функциональность или анимация еще не подключится. Плюс существует ограничение поддержки данного метода в устаревших версиях браузеров.
Метод костыля №1. Самый простой и, наверное, очевидный метод — добавить в скрипт условие проверки текущего размера окна браузера.
К минусом данного метода относится также наличие дублирования размеров экрана в CSS и в javascript и некоторые проблемы с получением адекватных кроссбраузерных размеров окна на различных платформах.
Метод костыля №2. Теперь о методе, которым пользуюсь я. Заключается он в использовании html-флагов для каждого диапазона. В качестве флага может выступать реальная конструкция верстки, появляющаяся только в нужном нам диапазоне размеров, либо пустой однопиксельный div.
Html:
<!DOCTYPE html> <html> <head> <title>Тест флагов</title> </head> <body> <div class=”max_width_800”></div> <div class=”max_width_479”></div> </body> </html> CSS:
.max_width_800{ display: none; } .max_width_479{ display: none; } @media screen and (max-width: 800px) { .max_width_800{ display: block; } .max_width_479{ display: none; } } @media screen and (max-width: 479px) { .max_width_800{ display: none; } .max_width_479{ display: block; } } А в самом скрипте мы просто проверяем показан ли наш маркер:
if ($('.max_width_800').is(':visible')) { // код jQuery } if ($('.max_width_479').is(':visible')) { // код jQuery } В данном примере мы явно указываем диапазоны размеров экрана только в CSS и при изменении нам не нужно беспокоиться о работоспособности скриптов. Также на кроссбраузерность последнего примера влияет только поддержка браузером медиазапросов.
Идем дальше и подключаем мобильный скрипт только при условии необходимости:
var head = $('head'); includeScripts(head); $(window).resize(function(){ includeScripts(head); }); function includeScripts(head){ if ($('.max_width_800').is(':visible')) { head.append('<script type="text/javascript" src="mobile-800.js" id=”script-mobile-800”></script>'); $('#script-mobile-479').remove(); } if ($('.max_width_479').is(':visible')) { head.append('<script type="text/javascript" src="mobile-479.js" id=”script-mobile-479”></script>'); $('#script-mobile-800').remove(); } }ссылка на оригинал статьи https://habrahabr.ru/post/318972/
Добавить комментарий