Android Browser Triggers jQuery $(window).resize() при прокрутке

Недавно я столкнулся с чем-то довольно странным, я не уверен, может быть, я просто что-то пропустил, но не могу понять, почему это происходит.

У меня есть сайт, на котором работает следующий фрагмент jQuery:

$(window).resize(function(){
  alert("Resize fired!");
});

Когда я перехожу на сайт в браузере телефона Android и просто прокручиваю вверх и вниз по сайту, я вижу предупреждение.

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

Кто-нибудь знает, почему браузер Android запускает это событие при прокрутке?

Любая информация будет принята с благодарностью.

ИЗМЕНИТЬ:

Я попытался установить CSS для тела, установив overflow-y для прокрутки, чтобы увидеть, было ли это жизнеспособным решением, но событие все еще запущено при прокрутке на Android.

ИЗМЕНИТЬ № 2:

Я использую следующий метатег в своем HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

Ответы

Ответ 1

У меня была такая же проблема, я решил проверить, действительно ли изменился размер окна, для этого мне нужно было сохранить ширину прошлого окна где-то в моем приложении. Код может быть примерно таким:

$(window).resize(function() {
  clearTimeout(app.resize.timer)
  app.resize.timer = setTimeout(function(){
     var window_changed = $(window).width() != app.size.window_width
     if(window_changed) console.log('Window size changed! resize site')
  }, 500)               
})

Я не рассчитывал на высоту окна, потому что мой браузер Android скрывает и показывает текстовое поле адреса, когда я прокручиваю вниз по сайту, делая изменение высоты окна на вертикальной прокрутке

Ответ 2

У меня тоже такая же проблема!
проблема верна, потому что высота браузера в Android изменится, когда строка url скроется и покажется. Итак, мы должны сделать перезагрузку браузера, только когда размер ширины изменится.

я видел этот fooobar.com/questions/33786/..., покажите мне, как это сделать. И это jsfiddle.

      var doit;
      function resizedw(appwidth){
          var window_changed = $(window).width() != appwidth;
          if ($(window).width() != appwidth){
            ("body").append("did it"+appwidth+" ");
          }
          past_width = $(window).width();
      }

      var past_width = $(window).width();
      window.onresize = function() {
        clearTimeout(doit);
        doit = setTimeout(function() {
            resizedw(past_width);
        }, 100);
      };

Ответ 3

@john-mccollum верен в комментариях. Похоже, что исчезающий интерфейс браузера вызывает изменение высоты, которое вызывает событие изменения размера. Поэтому проверяйте изменение в ширине, особенно в вашей функции, если вы делаете отзывчивые элементы дизайна, где вы хотите проверить, была ли изменена ширина.

$(window).resize(function(){
    var w = $(window).width();
    if (typeof checkw == 'undefined') checkw = w;
    if (w!=checkw) {
        console.log("The width changed from "+checkw+" to "+w);

        // do your responsive magic!

        checkw = w;
    }
});

Не требуется выполнять эту работу, но это хорошо сочетается с методом "smartresize" Paul Irish/John Hann.