iphone/ipad activando eventos de cambio de tamaño inesperados

Estoy trabajando en una versión móvil de mi sitio. Estoy utilizando las consultas de medios y CSS tanto como sea posible, pero también estoy usando algunos javascript para, por ejemplo, convertir mi navegación en una lista de colapso/expansión en dispositivos más pequeños para ahorrar espacio.iphone/ipad activando eventos de cambio de tamaño inesperados

Para manejar todo esto, estaba intentando usar el evento window.resize. Esto permite que la magia suceda en los navegadores de escritorio mientras se cambian de tamaño, pero obtengo cambios de tamaño en el iPad/iPhone cuando no los estoy esperando.

En los navegadores de escritorio, solo obtengo un cambio de tamaño si cambio el tamaño de la ventana. En navegadores móviles obtengo el evento de cambio de tamaño cuando cambio de orientación (esperado), pero también lo consigo cuando alterno para expandir/colapsar algo.

Aquí está un ejemplo sencillo:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<title>Resize test</title> 
<style> 
.box {height: 10000px; background: green; display: none;} 
</style> 
<script> 
$(function(){ 
    $(".opener").click(function(){ 
     $(".box").slideToggle(); 
    }); 
    $(window).resize(function(){ 
     alert("resized"); 
    }); 
}); 
</script> 
</head> 

<body> 
<a href="#" class="opener">Open/close me</a> 
<div class="box"></div> 
</body> 
</html>

Al hacer clic en el enlace en un navegador de escritorio, ninguna alerta. Haga clic en el enlace en iPhone/iPad, recibirá la alerta. ¿Cual es el trato?

Fuente

2012-01-17 rdoyle720

Hi @ rdoyle720. ¿Por qué no marcar como válida la respuesta @ 3tripe? –

@ rdoyle720 Me gustaría eso también :) – 3stripe

tienda de la anchura de la ventana y comprobar que ha cambiado en realidad antes de proceder a su $(window).resize función:

jQuery(document).ready(function($) { 

    // Store the window width 
    var windowWidth = $(window).width(); 

    // Resize Event 
    $(window).resize(function(){ 

     // Check window width has actually changed and it's not just iOS triggering a resize event on scroll 
     if ($(window).width() != windowWidth) { 

      // Update the window width for next time 
      windowWidth = $(window).width(); 

      // Do stuff here 

     } 

     // Otherwise do nothing 

    }); 

});

Fuente

2014-06-13 19:05:56 3stripe

GRACIAS. Acabo de pasar demasiado tiempo en este tema yo mismo. ¡Gran solución simple! – am80l

Me gusta esa solución. F * ck a iOS que hace el evento scroll resres' resize'. Incomprensible. –

Esta solución salva mi vida hoy nuevamente. No entiendo por qué esta respuesta no está marcada como la respuesta válida, pero esta respuesta es meritoria para tener casi 1000 votos positivos (hay cosas pequeñas y estúpidas que tienen mucho más votos positivos). –

que necesitaba para especificar un ancho:

<meta name="viewport" content="width=1000, initial-scale=1.0, user-scalable=yes">

Estilos:

html, body 
{ 
     height:100%; 
     width:100%; 
     overflow:auto; 
}

Fuente

2012-01-17 16:53:57

Gracias, pero luego pierdo la parte receptiva del diseño, teniendo que adaptarlo a diferentes resoluciones ... – rdoyle720

Buen punto. Incluso obtiene los eventos si body y html son: height: 100%; con: 100%; desbordamiento: ¿automático? –

Eso lo hizo, y agregó: html, cuerpo {altura: 100%; desbordamiento: automático; margin: 0} Se detuvo el cambio de tamaño de eventos. – rdoyle720

Compruebe si su desplazamiento de manera explícita la envoltura del cuerpo del HTML para ocultar la barra de direcciones cuando se carga la página.

Fuente

2012-01-27 10:29:52 Abhidev

¿Es erróneo suponer que solo desea tener el efecto del evento de cambio de tamaño en un dispositivo no táctil? Si es así es posible que utilices Modernizr y hacer una verificación como:

$(window).resize(function(e){ 
     if(Modernizr.touch) { 
     e.preventDefault(); 
     } 
    });

Fuente

2012-02-04 10:45:18 Felix

Algunas computadoras portátiles modernas también tienen pantallas táctiles ... – yckart

Desafortunadamente, Modernizr ya no puede detectar el tacto ni debería hacerlo. http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ – Alex

@ 3stripe tiene la correcta responder.

Esto es solo una ligera modificación que lo hace más eficiente almacenando en caché el objeto de la ventana en lugar de crear instancias repetidas de jQuery (tenga en cuenta que el evento resize puede llamarse rápidamente en un tamaño real).

jQuery(document).ready(function($) { 

    // Cached window jQuery object 
    var $window = $(window); 

    // Store the window width 
    var windowWidth = $window.width(); 

    // Resize Event 
    $window.resize(function(){ 

     // Check window width has actually changed and it's not just iOS triggering a resize event on scroll 
     if ($window.width() != windowWidth) { 

      // Update the window width for next time 
      windowWidth = $window.width(); 

      // Do stuff here 

     } 

     // Otherwise do nothing 

    }); 

});

Fuente

2016-07-09 23:22:43 anthonygore

Sí, esto es mejor, pero no debería ser "var $ window = $ (window);" (le falta la declaración de var) – Ralphonz

Gracias @Ralphonz, actualizado – anthonygore

encontré la respuesta en stackoverflow auto link of the solution. es la respuesta por sidonaldson que me ayudó a resolver un problema que enfrentaba anteriormente como este. ty

la respuesta es:

var cachedWidth = $(window).width(); 
    $(window).resize(function(){ 
     var newWidth = $(window).width(); 
     if(newWidth !== cachedWidth){ 
      //DO RESIZE HERE 
      cachedWidth = newWidth; 
     } 
    });

Fuente

2017-03-08 12:42:51 weBBer

Se siente hacky para comprobar el tamaño de la ventana para ver si se ha cambiado. En su lugar, use los recursos que jQuery le brinda.

En el controlador de eventos, puede verificar el campo target del evento jQuery, que siempre se establece en el elemento DOM que originó el evento. Si el usuario cambia el tamaño de la ventana, target será la ventana. Si el usuario cambia el tamaño de #someDiv, target será el #someDiv.

$(window).on('resize', function(event) { 
    if ($(event.target).is($(window))) { 
     doTheThing(); 
    } 
});

Fuente

2017-04-24 22:13:41

¿Ha comprobado su respuesta antes? En el desplazamiento de iOS, se activa el evento window.resize (con la ventana de destino), por lo que no se puede decir si fue o no redimensionado, dejándonos con la única solución para compararlo con un valor almacenado (pero puedes optimizar un poco y hacer esto solo para iOS - también verifique el agente de navegación) – qdev

iphone/ipad activando eventos de cambio de tamaño inesperados

Respuesta

Cuestiones relacionadas