Implementación del cambio de orientación por jquery mobile en la brecha del teléfono

Question

¿Podría alguien decirme el código correcto para el evento de cambio de orientación por jquery mobile en la brecha del teléfono? ¿Dónde y cómo implemento esta función de cambio de orientación?

Answer 1

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

a continuación en la función _orientationHandler, tienen algo así como:

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 
    } 
}); 

Puede añadir el evento de cambio de tamaño en el parámetro caso de la función de vinculación, si usted está apuntando el IOS y orientationChange no funciona Como el cambio de orientación dispara el evento de cambio de tamaño también.

Answer 3

El siguiente código debería funcionar en todos los navegadores para detectar cambios de orientación. No usa el evento móvil jquery, pero parece funcionar para la mayoría de los dispositivos.

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. }); 

Línea 2 retoma el caso de cambio de tamaño para cualquier navegador Safari no desde otros navegadores en otros dispositivos ocupan caso de cambio de tamaño más consistente que los eventos de cambio de orientación. http://www.quirksmode.org/m/table.html

La línea 5 realiza el control en un tiempo de espera ya que algunos de los navegadores nativos de Android no ocupan el nuevo ancho inmediatamente.

Línea 6 Para que ocurra el cambio de orientación, el producto de las diferencias de altura y ancho antiguo y nuevo debe ser negativo.

Answer 4

estoy usando esto en mis plantillas móviles, como el evento orientationChange no fue provocada en 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