app - El navegador de Android activa jQuery $(ventana).resize() en el desplazamiento

phonegap

Question

Recientemente me he topado con algo bastante extraño, no estoy seguro de que sea algo que me esté perdiendo, pero no entiendo por qué sucede esto.

Tengo un sitio que tiene el siguiente fragmento de jQuery en ejecución:

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

Cuando voy al sitio en el navegador de un teléfono Android y simplemente me desplazo hacia arriba y hacia abajo, puedo ver la alerta.

Las barras de desplazamiento de los navegadores de Android (que aparecen y desaparecen) se superponen en la parte superior de todo el sitio y no parecen causar ningún cambio de tamaño de la ventana, por lo que supongo que no se activará este evento.

¿Alguien sabe por qué el navegador de Android está activando este evento en el desplazamiento?

Cualquier información será muy apreciada.

EDITAR:

He intentado configurar CSS para el cuerpo, configurar el desbordamiento-y para desplazarse para ver si esa era una solución viable pero el evento todavía se está activando al desplazarse en Android.

EDICIÓN # 2:

Estoy usando el siguiente metatag en mi HTML:

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

Answer 1

¡Estoy teniendo el mismo problema también!
el problema es verdadero porque la altura del navegador en Android cambiará cuando la barra de URL se oculte y muestre. Por lo tanto, tenemos que hacer que la recarga del navegador solo ocurra cuando cambie el tamaño del ancho.

Vi esta pregunta en , muéstrame cómo hacer esto. Y este es el 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);
      };

Answer 2

@ john-mccollum es correcto en los comentarios. Parece ser que la interfaz del navegador desaparece y causa un cambio en la altura que activa el evento de cambio de tamaño. Por lo tanto, compruebe el cambio de ancho específicamente en su función si está realizando tareas de diseño con capacidad de respuesta en las que desea verificar si el ancho se ha redimensionado.

$(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;
    }
});

No es necesario para hacer que esto funcione, pero esto combina bien con el método de "smartresize" de Paul Irish / John Hann .

Answer 3

Estaba teniendo el mismo problema, mi solución era verificar si el tamaño de la ventana realmente había cambiado, para hacerlo necesitaba almacenar el ancho de la ventana anterior en algún lugar de mi aplicación. El código podría ser algo como esto:

$(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)               
})

No conté con la altura de la ventana porque mi navegador de Android se oculta y muestra el cuadro de texto de la dirección cuando me desplazo hacia abajo en el sitio haciendo que la altura de la ventana cambie en el desplazamiento vertical