Chrome móvil activa el evento de cambio de tamaño en el desplazamiento


79

Estoy usando el navegador móvil Chrome en galaxy s4, android 4.2.2 y, por alguna razón, cada vez que desplazo la página hacia abajo, se activa un evento de cambio de tamaño verificado por la escala de imágenes de una presentación de diapositivas jquery.cycle2.

¿Alguna idea de por qué esto podría estar sucediendo?


1
Terminó siendo un problema con el evento de cambio de tamaño, pero debido a que la altura de mi elemento se estableció al 100% de la ventana gráfica, se estaba recalculando en el desplazamiento.
KobeBryant

Respuestas:


48

Solo por curiosidad, estaba tratando de reproducirlo y, si estoy en lo correcto, esto es causado por la barra de navegación cromada.

Cuando te desplazas hacia abajo y Chrome oculta la barra de navegación del navegador, produce un cambio de tamaño de la ventana, pero esto es correcto, porque después de eso tenemos un tamaño de ventana más grande debido al espacio libre que ha dejado la barra de navegación del navegador.

Artículo relacionado: https://developers.google.com/web/updates/2016/12/url-bar-resizing


3
Ya sea que se trate de un comportamiento previsto o no, no queremos que active la función de cambio de tamaño. Entonces, ¿cuál es la solución aquí, sin seguir la ruta de un código largo que han sugerido otras respuestas?
Studocwho

Agregué un vínculo a mi respuesta que brinda más información sobre cómo lidiar con este comportamiento en Chrome para dispositivos móviles.
AlbertoFdzM

El enfoque más simple es comparar la altura con el ancho después de que el oyente de la ventana gráfica haya disparado. Si solo ha cambiado la altura, es muy probable que una barra de herramientas nativa del navegador esté afectando la altura de la ventana gráfica. Si existe el caso de que un usuario afecte las dimensiones de la ventana gráfica solo por la altura, entonces puede ir más allá y analizar la distancia y el tiempo para discernir si es la entrada del usuario o la entrada del sistema lo que está cambiando la ventana.
MarsAndBack

72

Suena extraño, pero lo he visto en otros navegadores. Puede solucionar esto así.

var width = $(window).width(), height = $(window).height();

luego, en su controlador de eventos de cambio de tamaño, puede hacerlo.

if($(window).width() != width || $(window).height() != height){
  //Do something
}

No sé el alcance de sus funciones y todo eso, pero debería obtener la esencia de esto.


5
¡Salvó mi día! Solo necesito verificar el ancho
Yuriy Kvartsyanyy

14
El problema se debe a que la barra de desplazamiento se oculta o muestra, lo que hace que la altura de la pantalla cambie y, por lo tanto, active el archivo $(window).resize(). He sugerido una edición.
Sander Koedood

3
Solo quería agregar que también observamos un comportamiento similar con iOS Safari.
Kris Krause

4
ya que es la altura la que cambia, la condición if solo debe verificar el cambio de ancho. Además, la condición no se activa hasta que el ancho y el alto hayan cambiado. que no siempre es el caso, pero casi todos los cambios de tamaño de la pantalla implican un cambio en el ancho, por lo que sugiero no usar la parte de altura. if($(window).width() != width){ }
Imran Bughio

7
debería ser || en lugar de &&
Maysam Torabi

5

No sé si todavía es interesante, pero Mi solución es :)

var document_width, document_height;

$(document).ready(function()
{
	document_width=$(document).width(); document_height=$(document).height();
    // Do something
}

$(window).resize(function()
{
    if(document_width!=$(document).width() || document_height!=$(document).height()) 
    {
        document_width=$(document).width(); document_height=$(document).height();
        // Do something
    }
}	


2
Creo que debería usar $ (window) .height () no $ (document) .height (), y width.
Tarek El-Mallah

1

La pregunta ya ha sido respondida, pero dado que esta pregunta no plantea la cuestión de los sitios receptivos, me gustaría agregar algo de información al respecto.

Encontré este problema en Chrome en Android al desarrollar un sitio web receptivo. Al cambiar el tamaño de la ventana, quiero ocultar los menús (debido a que algunos elementos de diseño necesitan un posicionamiento adecuado), pero el comportamiento de Chrome para Android para activar un evento de cambio de tamaño en el desplazamiento lo hizo algo difícil.

Cambiar para comenzar a usar onOrientationChange no era una opción, ya que este es un sitio receptivo, no hay cambio de orientación en una PC de escritorio, pero aún necesitaba el código para funcionar tanto en PC normales, como en tabletas y teléfonos inteligentes.

Podría haber comenzado a rastrear el navegador y demás, pero hasta ahora he podido evitar eso ...

Intenté implementar la solución sugerida por CWitty, pero dado que el desplazamiento hacia arriba o hacia abajo, de hecho, desencadena un cambio de altura que tampoco funcionó.

Terminé agregando una condición que solo oculta el menú cuando se cambia el ancho, no cuando se cambia la altura. Esto funciona en mi caso, ya que solo necesito reescribir el menú cuando se cambia el ancho.


1
Mi sugerencia sería omitir la verificación de la altura y verificar solo el ancho.
bertie

La respuesta aceptada todavía se aplica; depende de usted continuar con la lógica de acuerdo con sus necesidades. En última instancia, lo descubrió usted mismo, y esto debería ser solo un comentario debajo de la respuesta aceptada.
MarsAndBack

1

Los navegadores de los dispositivos móviles a menudo ocultan su barra de navegación superior horizontal cuando alguien se desplaza hacia abajo y la muestran de nuevo cuando se desplaza hacia arriba. Este comportamiento afecta el tamaño del cliente, activando el evento de cambio de tamaño. Solo necesita controlar no ejecutar su código debido a cambios de altura o, al menos, debido a ese cambio de altura.


0

Este es un duplicado de evento de cambio de tamaño Javascript en scroll mobile

Para solucionarlo, use onOrientationChange y la propiedad window.orientation. Vea la respuesta relacionada: aquí


Incorrecto. Esta pregunta trata sobre el evento de cambio de tamaño que se activa inesperadamente en un navegador móvil.
user2867288

5
En realidad, esto no es necesariamente incorrecto. usar onOrientationChange es una solución legítima, ya que en un dispositivo móvil es cuando es más probable que veas un evento de cambio de tamaño de pantalla. Esta respuesta está bien. No estoy votando a favor simplemente porque hay otro caso que esto no detectará, y es cuando los cromos del navegador aparecen / desaparecen y causan eventos de cambio de tamaño (que es mi problema ATM). De lo contrario, esta sería una buena solución.
dudewad

Suponga que debería capturar eventos de cambio de tamaño para ajustar elementos en la pantalla; abre sus herramientas de desarrollador y todo funciona bien con el cambio de tamaño de la ventana, ¡incluso puede desplazarse hacia arriba y hacia abajo! ¡Ahora, decides abrir la página en una tableta, te desplazas hacia arriba y hacia abajo y todo se reajusta dando terremotos en tu pantalla! ¡Aún necesita manejar los eventos de cambio de tamaño de ventana en su PC! Entonces, ¡esta no es una respuesta correcta!
centurian

Estaba usando window.resize para rastrear el cambio de orientación. De esta manera enfrentando este tema. Esta es una gran idea.
AMNBandara

No hay un código de muestra adecuado en la respuesta o incluso en la respuesta vinculada, y los enlaces externos están inactivos. En cualquier caso, la pregunta OP se ocupa del desplazamiento básico, sin cambio de orientación, donde se activa un evento de cambio de tamaño independientemente de la orientación. Simplemente comprobar el cambio de altura es lo más eficaz a nivel universal. onOrientationChangees útil en otros lugares ..
MarsAndBack

0

Resulta que hay muchas cosas que pueden activarse resizeen varios navegadores móviles.

Sé que no es ideal enlazar a un recurso externo, pero QuirksMode tiene una tabla legible que no quiero duplicar (o mantener) aquí: http://www.quirksmode.org/dom/events/resize_mobile.html

Solo para dar un ejemplo, el que nos estaba consiguiendo: aparentemente en muchos navegadores, abrir el teclado suave dispara el evento.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.