Implementazione evento cambio di orientamento da jquery mobile nell'intervallo telefonico

Question

Qualcuno potrebbe farmi sapere il codice giusto per l'evento di modifica dell'orientamento da parte di jquery mobile nell'intervallo telefonico? Dove e come posso implementare questa funzione di orientationChange?

Answer 1

$(window).bind('orientationchange', _orientationHandler); 

poi nella funzione _orientationHandler, hanno qualcosa di simile:

if(event.orientation){ 
     if(event.orientation == 'portrait'){ 
        //do something 
     } 
     else if(event.orientation == 'landscape') { 
        //do something 
     } 
} 

Answer 2

$(window).bind('orientationchange', function(e){ 
    if ($.event.special.orientationchange.orientation() == "portrait") { 
     //Do whatever in portrait mode 
    } else { 
     //Do Whatever in landscape mode 
    } 
}); 

È possibile aggiungere l'evento di ridimensionamento nel parametro caso di funzione bind, se ci si rivolge iOS e orientationChange non funziona Dal momento che il cambiamento dell'orientamento attiva anche l'evento di ridimensionamento.

Answer 3

Il seguente codice dovrebbe funzionare su tutti i browser per rilevare il cambio di orientamento. Non utilizza l'evento mobile jQuery ma sembra funzionare per la maggior parte dei dispositivi.

1. var isIOS = /safari/g.test(navigator.userAgent.toLowerCase()); 
2. var ev = isIOS ? 'orientationchange' : 'resize'; 
3. var diff = (window.innerWidth-window.innerHeight); 
4. $(window).bind(ev,function(){ 
5.  setTimeout(function(){ 
6.   if(diff*((window.innerWidth-window.innerHeight)) < 0) 
7.    orientationChanged(); 
8.  },500); 
9. }); 

linea 2 riprende l'evento resize per tutti i browser non-safari in quanto altri browser in altri dispositivi occupano evento di ridimensionamento in modo più coerente di evento di modifica dell'orientamento. http://www.quirksmode.org/m/table.html

La riga 5 esegue il controllo in un timeout poiché alcuni browser Android nativi non acquisiscono immediatamente la nuova larghezza.

Riga 6 Affinché il cambiamento dell'orientamento abbia luogo, il prodotto delle differenze tra altezza e larghezza vecchie e nuove deve essere negativo.

Answer 4

Sto usando questo nei miei modelli di mobili, come l'evento orientationChange non è stato attivato su iOS 7 Safari:

// ORIENTATION CHANGE TRICK 
    var _orientation = window.matchMedia("(orientation: portrait)"); 
    _orientation.addListener(function(m) { 
     if (m.matches) { 
      // Changed to portrait 
      $('html').removeClass('orientation-landscape').addClass('orientation-portrait'); 
     } else { 
      // Changed to landscape 
      $('html').removeClass('orientation-portrait').addClass('orientation-landscape'); 
     } 
    }); 
    // (event is not triggered in some browsers) 
    $(window).on('orientationchange', function(e) { 
     if (e.orientation) { 
      if (e.orientation == 'portrait') { 
       $('html').removeClass('orientation-landscape').addClass('orientation-portrait'); 
      } else if (e.orientation == 'landscape') { 
       $('html').removeClass('orientation-portrait').addClass('orientation-landscape'); 
      } 
     } 
    }).trigger('orientationchange'); 
    // END TRICK