web-dev-qa-db-fra.com

Implémentation d'événement de changement d'orientation par jquery mobile dans l'écart téléphonique

Quelqu'un pourrait-il s'il vous plaît me faire connaître le bon code pour l'événement de changement d'orientation par jquery mobile dans l'intervalle de téléphone? Où et comment implémenter cette fonction orientationChange?

jqueryjquery-mobilecordova
23
Nishant
$(window).bind('orientationchange', _orientationHandler);

puis dans le _orientationHandler fonction, avoir quelque chose comme:

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

Vous pouvez ajouter l'événement de redimensionnement dans le paramètre d'événement de la fonction de liaison, si vous ciblez iOS et que l'orientationchange ne fonctionne pas. Puisque la modification de l'orientation déclenche également l'événement de redimensionnement.

12
Ettiene Grobler

Le code suivant doit fonctionner sur tous les navigateurs pour détecter les changements d'orientation. Il n'utilise pas d'événement mobile jquery mais semble fonctionner pour la plupart des appareils.

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 ligne 2 prend en compte l'événement de redimensionnement pour tous les navigateurs non safari, car les autres navigateurs d'autres appareils utilisent l'événement de redimensionnement de manière plus cohérente que l'événement de changement d'orientation. http://www.quirksmode.org/m/table.html

La ligne 5 effectue la vérification dans un délai d'attente car certains des navigateurs natifs Android ne prennent pas immédiatement la nouvelle largeur.

Ligne 6 Pour que le changement d'orientation ait lieu, le produit des différences de hauteur et de largeur anciennes et nouvelles doit être négatif.

1
agaase

J'utilise ceci dans mes modèles mobiles, car l'événement d'orientationchange n'a pas été déclenché sur 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
0
itsjavi