0
96
2015-07-30

Адаптируем JavaScript для адаптивного дизайна

JavaScript сниппет который позволит Вашим JS сценариям срабатывать в зависимости от разришения экрана.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Поддержка адаптивного дизайна на всех доступных сегодня карманных устройствах означает, что большинство веб-сайтов используют медиа-запросы CSS для установки точек остановки (breakpoint) обычно для мобильных устройств, планшетов и ноутбуков.

Когда в игру вступают JavaScript-взаимодействия, иногда ваш JavaScript-код должен знать о точках остановки, доступных в CSS правилах.

Приведенный ниже код позволяет легко настроить breakpoint и проверить, активна ли конкретная точка остановки с помощью JavaScript :

var mobile = 768;
var tablet = 1280;
var desktop = 1440;

/**
 * Easily check if a breakpoint is active via JavaScript
 *
 * @param {string} breakpoint
 * @returns {boolean}
 */
var isBreakpointActive = function (breakpoint) {
    var isActive = false;
    switch (breakpoint) {
        case 'mobile':
            isActive = (window.innerWidth <= mobile);
            break;
        case 'tablet':
            isActive = (window.innerWidth > mobile && window.innerWidth <= tablet);
            break;
        case 'desktop':
            isActive = (window.innerWidth > tablet);
            break;
    }
    return isActive;
};




Статья была переведена для блога TechBlog.SDStudio.top

Источник: wpscholar.com