jquerymobile - jquery mobile structure

Implementación de cambio de orientación por jquery mobile en la brecha telefónica

Question

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

Answer 1

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

La línea 2 retoma el evento de cambio de tamaño para cualquier navegador que no sea Safari, ya que otros navegadores en otros dispositivos toman el evento de cambio de tamaño de forma más consistente que el evento 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 entre la altura y el ancho antiguo y nuevo debe ser negativo.

Answer 2

Estoy usando esto en mis plantillas móviles, ya que el evento orientationchange no se activó 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

Answer 3

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

Puede agregar el evento de cambio de tamaño en el parámetro de evento de la función de vinculación, si se dirige a iOS y el cambio de orientación no funciona. Como el cambio de orientación dispara el evento de cambio de tamaño también.

Answer 4

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

luego en la función _orientationHandler , tenga algo como:

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