android - teclado - como reducir el tamaño de una pagina web en google chrome

La función de Chrome móvil cambia el tamaño del evento en el desplazamiento

Question

Estoy usando el navegador móvil de 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 las imágenes de una presentación de diapositivas de jquery.cycle2.

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

Answer 1

Eso suena extraño, pero lo he visto en otros navegadores. Puedes solucionar esto como eso.

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

luego en tu controlador de eventos de cambio de tamaño puedes hacerlo.

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

No conozco el alcance de tus funciones y todo eso, pero debes entender el significado de esto.

Answer 2

Este es un duplicado del evento de cambio de tamaño de Javascript en el móvil de desplazamiento

Para solucionarlo, use las propiedades onOrientationChange y window.orientation. Ver la respuesta relacionada: here

Answer 3

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

Me encontré con 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 algunos elementos de diseño que necesitan un posicionamiento adecuado), pero el comportamiento de Chrome para Android desencadena un evento de cambio de tamaño en el desplazamiento, algo difícil.

El cambio 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 PCs normales como en tabletas y teléfonos inteligentes.

Podría haber empezado a olfatear el navegador y cosas por el estilo, pero hasta ahora he podido evitar eso ...

Traté de implementar la solución sugerida por CWitty, pero como 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 la altura ha cambiado. Esto funciona en mi caso ya que solo necesito reescribir el menú cuando se cambia el ancho.

Answer 4

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

Answer 5

No lo sé, sigue siendo 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
}
} 

Answer 6

Resulta que hay muchas cosas que pueden disparar el resize en varios navegadores móviles.

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

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

Answer 7

Solo por curiosidad intenté reproducirlo y, si estoy en lo correcto, esto es causado por la barra de navegación de Chrome.

Cuando se desplaza hacia abajo y Chrome oculta la barra de navegación del navegador, produce un tamaño de ventana, pero esto es correcto, porque después de eso tenemos un tamaño de ventana mayor debido al espacio libre que deja la barra de navegación del navegador.

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

¡Saludos!