Как наиболее эффективно проверять определенные точки останова при изменении размера браузера?

Я играю с адаптивным дизайном, в котором определены две точки останова:

Mobile > max-width 320px
Tablet portrait > max-width 767px

На рабочем столе у ​​меня много анимации + расширенная функциональность с помощью Javascript. На мобильных устройствах и планшетах я хочу упростить и отключить как некоторые JS, так и «перестроить» некоторые элементы DOM.

Мне интересно, какой самый эффективный способ определить определенные точки останова (с точки зрения ширины)? Здесь я много думаю о производительности.

Я знаю, что могу просто проверить ширину окна при изменении размера с помощью чего-то вроде:

$( window ).resize(function() {
  if ($(window).width() > 320 && $(window).width() < 400) {
    //mobile
  }
  if ($(window).width() > 401 && $(window).width() < 768) {
    //tablet
  }
  if ($(window).width() > 769) {
    //desktop
  }
});

Но это кажется очень «дорогой» операцией?

Любые предложения относительно облегченных библиотек, которые можно использовать для этого, также очень приветствуются!


jquery performance window-resize
person user1231561    schedule 14.07.2015    source источник
comment
Это может не помочь, поэтому я оставлю это в качестве комментария, но во многих случаях, если вы ищете эффективные способы изменения макета и перестроения элементов DOM, CSS, безусловно, является хорошим другом. Ваш вопрос немного расплывчатый, поэтому трудно сказать.   -  person Michael    schedule 14.07.2015
comment
Привет, Майкл. CSS, безусловно, поможет мне в этом, но, к сожалению, этого недостаточно для всех случаев, особенно если я хочу отключить определенные части JS.   -  person user1231561    schedule 14.07.2015
comment
Ознакомьтесь с другими ответами, но, по крайней мере, я бы изменил ваши ifs на блок if/else if. Кроме того, как написано, нет случая, когда ширина окна точно равна 400, 401, 768 или 769 пикселей.   -  person Michael    schedule 14.07.2015

Ответы (2)


arrow_upward
3
arrow_downward

Я часто сталкивался с этой проблемой и не нашел идеального решения. Однако есть обходной путь, который кажется менее требовательным к ресурсам. Используя тайм-аут внутри вашей функции resize() и постоянно очищая его, вы можете убедиться, что ваш код запускается только после того, как область просмотра перестанет изменять размер.

var resizeTimer, width;
var mobile = tablet = desktop = false;

$(window).resize(function() {
    // clear the timeout
    clearTimeout(resizeTimer);

    // execute breakpointChange() once the viewport 
    // has stopped changing in size for 400ms
    resizeTimer = setTimeout(breakpointChange(), 400);
});

function breakpointChange() {
    // use vanillajs window.innerWidth 
    // instead of jQuery $(window).width() as suggested by simon
    width = window.innerWidth;

    if (!mobile && width < 400) {
        tablet = desktop = false;
        mobile = true;
        console.log('is mobile');
    }

    if (!tablet && width > 401 && width < 768) {
        mobile = desktop = false;
        tablet = true;
        console.log('is tablet');
    }

    if (!desktop && width > 769) {
        mobile = tablet = false;
        desktop = true;
        console.log('is desktop');
    }
}
$(window).resize();

Это, конечно, не лучшее, что можно сделать, но это предотвратит постоянное выполнение вашего кода. Не стесняйтесь добавлять к моему ответу и / или исправлять меня. Вот скрипта

person The F    schedule 14.07.2015
comment
Привет, The F. Я действительно думал о каком-то подходе с таймером, единственное, что делало его немного менее интересным, - это просто задержка, которую он мог создать при фактическом запросе решения, например, на мобильном телефоне - тогда сначала будет задержка на самом деле признание того, что мы на мобильном телефоне, а затем задержка того, что я хочу вызвать, на мобильном телефоне. Но это, безусловно, может оказаться для меня выходом, я попробую проверить ваш пример, ура! - person user1231561; 14.07.2015
comment
Привет, 400 мс на самом деле может быть немного щедрым. Попробуйте уменьшить его до 200 мс, и задержка должна быть почти незаметной. Я обновил ответ, чтобы он был более полным. - person The F; 14.07.2015

arrow_upward
0
arrow_downward

Было бы очень эффективно, если бы вы прекратили использовать jQuery в тех случаях, когда он устарел. Объект JavaScript window имеет свойство innerWidth / outerWidth, которое можно использовать без вызовов jQuery.

$( window ).resize(function() {
  var width = window.innerWidth; // e.g.

  if (width > 320 && width < 400) {
    //mobile
  }
});

Таким образом, у вас нет проблем с производительностью, потому что это будет просто свойство объекта, а не вызовы/приведения функций. Если вам нужно знать только устройство, это будет идеальным решением.

Когда вы работаете с DOM внутри - ищите таймауты, предложенные "The F"

person smnbbrv    schedule 14.07.2015