orientationchange evento fuochi scorre e ridimensiona evento

Question

Per un progetto su cui sto lavorando, mi sono imbattuto in uno strano problema, per il quale non sono riuscito a trovare una risposta qui (o altrove).

Ho provato a creare un violino per dimostrare cosa succede, ma a causa della natura del mio script e del modo in cui funziona jsfiddle, non funziona correttamente. Ad ogni modo, here's a link to the Fiddle così almeno avrai il codice.

quello che voglio che accada

Eseguire un singolo gestore (onViewportChange) su tre possibili window eventi: resize, orientationchange e scroll. In base al tipo di evento, il gestore individuerà cosa fare. Sembra abbastanza semplice.

Quello che ho fatto

Per questo esempio, ho limitato il gestore per eco il tipo di evento, a scopo di test:

var onViewportChange = function(e) { 
    alert(e.type); 
}; 

ho associare il gestore per gli eventi: (ho anche cercato .bind() con una serie di eventi, e diverse lega separati)

$(window).on({ 
    'orientationchange resize scroll' : function(e){ 
     onViewportChange(e); 
    } 
}); 

L'HTML è complet ely vuota, fatta eccezione per gli elementi di base arbitraria (doctype, html, body e naturalmente jQuery e questo script)

cosa succede in realtà

E ora si arriva strano: gli eventi sparano bene su browser desktop (principalmente a causa della mancanza dell'attivazione di un evento orientationchange), ma non sui dispositivi mobili (testati su iOS6 + iPad di terza generazione e iOS6 + iPhone 5). Quando ruoto il mio dispositivo (s);

• Il fuoco iPad e iPhone tutti e tre: orientationchange, resize seguito da scroll
• Chrome su iPhone spara resize seguito da orientationchange
• Un telefono Android ho preso in prestito trigger orientationchange seguito da resize

(Si noti che l'ordine degli eventi potrebbe non essere accurato a causa delle condizioni di gara.)

ed ecco perché ho collegato alla manifestazione orientationchange: Quando rimuovo l'evento orientationchange (lasciando resize e scroll), solo l'evento scroll è sparato su una rotazione del dispositivo, ma non è più l'evento resize.

Non capisco perché tutti gli eventi si attivino contemporaneamente. Almeno; Posso immaginare che un resize venga attivato su un orientationchange perché le dimensioni della finestra cambiano, ma a scroll?

Qualcuno sa perché questo sta accadendo?

modificare ho creato una demo qui: http://beta.hnldesign.nl/orientation/index.html

Answer 1

Hmmmm, provate questo (estratto da jQuery documentazione API ...) http://api.jquery.com/on/

$(window).on({ 
    orientationchange: function(e) { 
    onViewportChange(e); 
    }, resize: function(e) { 
    onViewportChange(e); 
    }, scroll: function(e) { 
    onViewportChange(e); 
    } 
}); 

Questo dovrebbe funzionare ... forse è necessario modificare leggermente il codice