iphone/ipad che attiva eventi di ridimensionamento imprevisti

Sto lavorando su una versione mobile del mio sito. Sto usando il più possibile media query e CSS, ma sto anche utilizzando alcuni javascript per, ad esempio, trasformare la mia navigazione in un elenco di compressione/espansione su dispositivi più piccoli per risparmiare spazio.iphone/ipad che attiva eventi di ridimensionamento imprevisti

Per gestire tutto questo, stavo tentando di utilizzare l'evento window.resize. Questo permette alla magia di accadere sui browser desktop mentre vengono ridimensionati, ma sto ricevendo gli eventi di ridimensionamento su iPad/iPhone quando non li aspetto.

Sui browser desktop, ottengo un evento di ridimensionamento solo se effettivamente ridimensiono la finestra. Nei browser mobili ottengo l'evento di ridimensionamento quando cambio orientamento (previsto), ma lo ottengo anche quando si attiva/espande/comprimi qualcosa.

Ecco un semplice esempio:

<!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>

Quando si fa clic sul collegamento su un browser desktop, senza avviso. Fai clic sul collegamento su iPhone/iPad, ricevi l'avviso. Qual è l'accordo?

fonte

2012-01-17 rdoyle720

Ciao @ rdoyle720. Perché non contrassegnare come risposta valida la risposta @ 3stripe? –

@ rdoyle720 Mi piacerebbe anche questo :) – 3stripe

Conservare la larghezza della finestra e verificare che sia effettivamente cambiato prima di procedere con il vostro $(window).resize funzione:

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 

    }); 

});

fonte

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

GRAZIE. ho appena passato troppo tempo a questo problema io stesso. Ottima soluzione semplice! – am80l

Mi piace questa soluzione. F * ck su iOS che fa scattare l'evento 'ridimensiona '. Incomprensibile. –

Questa soluzione mi salva la vita ancora oggi. Non capisco perché questa risposta non è contrassegnata come la risposta valida, ma questa risposta è meritoria per avere quasi 1000 upvotes (ci sono piccole cose stupide che hanno molti più upvotes). –

avevo bisogno di specificare una larghezza:

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

Stili:

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

fonte

2012-01-17 16:53:57

Grazie, ma poi perdo la parte sensibile del design, avendo adattarsi a diverse risoluzioni ... – rdoyle720

Buon punto. Ottieni anche gli eventi se body e html sono: height: 100%; con: 100%; overflow: auto? –

L'ha fatto, aggiungendo: html, body {height: 100%; overflow: auto; margin: 0} Arrestato gli eventi di ridimensionamento. – rdoyle720

Verificare se il vostro scorrimento in modo esplicito il corpo HTML wrapper per nascondere la barra degli indirizzi quando la pagina viene caricata.

fonte

2012-01-27 10:29:52 Abhidev

L'ipotesi è errata, si desidera solo avere l'effetto dell'evento di ridimensionamento su un dispositivo non touch? Se è così si potrebbe utilizzare Modernizr e fare un controllo del tipo:

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

fonte

2012-02-04 10:45:18 Felix

Alcuni laptop moderni hanno anche touchscreen ... – yckart

Sfortunatamente, Modernizr non può più rilevare il tocco e non dovrebbe. http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ – Alex

@ 3stripe ha la corretta risposta.

Questa è solo una leggera modifica che rende più efficiente la memorizzazione nella cache dell'oggetto window piuttosto che l'istanziazione ripetuta di jQuery (tenere presente che l'evento resize può essere chiamato rapidamente su un ridimensionamento effettivo).

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 

    }); 

});

fonte

2016-07-09 23:22:43 anthonygore

Sì, è meglio, ma non dovrebbe essere "var $ window = $ (window);" (ti manca la dichiarazione var) – Ralphonz

Grazie @Ralphonz, aggiornato – anthonygore

ho trovato la risposta in stackoverflow it self link of the solution. è la risposta di sidonaldson che mi ha aiutato a risolvere un problema affrontato in precedenza in questo modo. ty

la risposta è:

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

fonte

2017-03-08 12:42:51 weBBer

Ci si sente hacky per controllare la dimensione della finestra per vedere se è cambiato. Invece, usa le risorse che ti fornisce jQuery!

Nel gestore eventi, è possibile controllare il campo target dell'evento jQuery, che è sempre impostato sull'elemento DOM che ha originato l'evento. Se l'utente ridimensiona la finestra, target sarà la finestra. Se l'utente ridimensiona #someDiv, target sarà il #someDiv.

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

fonte

2017-04-24 22:13:41

Hai già controllato la risposta? Nello scroll di iOS viene generato l'evento window.resize (con la finestra di destinazione), quindi non puoi dire se è stato ridimensionato o meno, lasciandoci con l'unica soluzione per controllarlo rispetto a un valore memorizzato (ma puoi ottimizzare un po ' e fallo solo per iOS - controlla anche l'agente di navigazione) – qdev

iphone/ipad che attiva eventi di ridimensionamento imprevisti

risposta

Problemi correlati