Велосипед с электроприводом вместо рейсового автобуса. Хочу поделиться своим методом адаптации скриптов jQuery (сам привык писать скрипты на jQuery, но разницы нет, все описанное верно и для чистого javascript) параллельно адаптации веб-верстки.
Для адаптации под различные разрешения экранов и различные устройства используют медиа-запросы в CSS. Допустим у нас заложена адаптация нашей верстки под 2 диапазона: от 0 до 479 пикселей и до 800 пикселей.
Мы хотим использовать различную анимацию и/или запросы к серверу в зависимости от размера экрана. Т.е. нам необходимо параллельно срабатыванию меди-запроса из CSS реагировать в скриптах javascript. Для этого существует, как минимум, 3 способа.
Академический. Специальный метод javascript: window.matchMedia, определяющий срабатывание медиа-запроса, аналогичного CSS:
Минусом данного метода считаю наличие явного указания диапазона разрешения экрана в 2-х местах: CSS и javascript. При изменении диапазона в CSS можно забыть поменять его в javascript, в результате мы получим баг в работе сайта, при определенной ширине окна верстка адаптируется, а соответствующая ей функциональность или анимация еще не подключится. Плюс существует ограничение поддержки данного метода в устаревших версиях браузеров.
Метод костыля №1. Самый простой и, наверное, очевидный метод — добавить в скрипт условие проверки текущего размера окна браузера.
К минусом данного метода относится также наличие дублирования размеров экрана в CSS и в javascript и некоторые проблемы с получением адекватных кроссбраузерных размеров окна на различных платформах.
Метод костыля №2. Теперь о методе, которым пользуюсь я. Заключается он в использовании html-флагов для каждого диапазона. В качестве флага может выступать реальная конструкция верстки, появляющаяся только в нужном нам диапазоне размеров, либо пустой однопиксельный div.
Html:
CSS:
А в самом скрипте мы просто проверяем показан ли наш маркер:
В данном примере мы явно указываем диапазоны размеров экрана только в CSS и при изменении нам не нужно беспокоиться о работоспособности скриптов. Также на кроссбраузерность последнего примера влияет только поддержка браузером медиазапросов.
Идем дальше и подключаем мобильный скрипт только при условии необходимости:
Спасибо за внимание!
Для адаптации под различные разрешения экранов и различные устройства используют медиа-запросы в 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();
}
}Спасибо за внимание!
