web-dev-qa-db-fra.com

L'iPad ne déclenche pas l'événement de redimensionnement allant de la verticale à l'horizontale?

Quelqu'un a-t-il remarqué ce comportement? J'essaie d'écrire un script qui se déclenchera lors d'un redimensionnement. Cela fonctionne bien sur les navigateurs normaux, fonctionne très bien sur iPhone, mais sur iPad, ne déclenchera que le passage de la fenêtre horizontale à la fenêtre verticale, et non l'inverse.

Voici le code:

$(window).resize( function() {

    var agent=navigator.userAgent.toLowerCase();
    var is_iphone = ((agent.indexOf('iphone') != -1));
    var is_ipad = ((agent.indexOf('ipad') != -1));

    if(is_iphone || is_ipad){
        location.reload(true);
    } else {     
        /* Do stuff. */
    };
});
javascriptiphoneipadresizeweb-applications
35
dclowd9901

Si je vous ai bien compris, vous voulez faire quelque chose lorsque l'utilisateur incline l'iPad. Voici:

window.onorientationchange = function(){

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0){

        // iPad is in Portrait mode.

    }

    else if (orientation === 90){

        // iPad is in Landscape mode. The screen is turned to the left.

    }


    else if (orientation === -90){

        // iPad is in Landscape mode. The screen is turned to the right.

    }

}

The left picture shows portrait mode, the right one landscape mode

46
Vincent

Je pense que ce que vous voulez serait d'utiliser le iPad Orientation CSS , qui ressemble à ceci:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

De plus, l'événement orientationchange se déclenche lorsque l'orientation est modifiée, selon conseils de développement Web pour iPad .

Ensemble, cela devrait vous donner suffisamment d'outils pour faire face au changement.

14
artlung

Cela inclut toutes les orientations.

Voici deux options:

window.onorientationchange = function() {

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0) {
    // iPad is in Portrait mode.

    } else if (orientation === 90) {
     // iPad is in Landscape mode. The screen is turned to the left.

    } else if (orientation === -90) {
     // iPad is in Landscape mode. The screen is turned to the right.

    } else if (orientation === 180) {
    // Upside down portrait.

    }
}

ou

// Checks to see if the platform is strictly equal to iPad:
    if(navigator.platform === 'iPad') {
            window.onorientationchange = function() {

            var orientation = window.orientation;

            // Look at the value of window.orientation:

            if (orientation === 0) {
            // iPad is in Portrait mode.

            } else if (orientation === 90) {
             // iPad is in Landscape mode. The screen is turned to the left.

            } else if (orientation === -90) {
             // iPad is in Landscape mode. The screen is turned to the right.

            } else if (orientation === 180) {
            // Upside down portrait.

            }
          }       
        }
7
user1149756

La seule chose que j'ai pu trouver d'Apple :

Safari sur iPad et Safari sur iPhone n'ont pas de fenêtres redimensionnables. Dans Safari sur iPhone et iPad, la taille de la fenêtre est définie sur la taille de l'écran (moins les contrôles de l'interface utilisateur de Safari) et ne peut pas être modifiée par l'utilisateur. Pour se déplacer dans une page Web, l'utilisateur modifie le niveau de zoom et la position de la fenêtre d'affichage en appuyant deux fois ou en pinçant pour effectuer un zoom avant ou arrière, ou en touchant et en faisant glisser pour déplacer la page. Lorsqu'un utilisateur modifie le niveau de zoom et la position de la fenêtre d'affichage, il le fait dans une zone de contenu visible de taille fixe (c'est-à-dire la fenêtre). Cela signifie que les éléments de page Web dont la position est "fixée" à la fenêtre d'affichage peuvent se retrouver hors de la zone de contenu visible, hors écran.

Je comprends la partie "fonctionne sur l'iPhone" ... mais peut-être que ce n'est plus le cas? Cela pourrait être un changement dans OS/mobile Safari depuis la dernière version publique de l'iPhone OS livrée (la documentation ci-dessus date de mars 2010).

Je vais ré-étiqueter cette question en y ajoutant l'iPhone, peut-être qu'un des gars avec la version 4.0 du développeur OS peut tester cela? Si c'est le cas, il a été supprimé, cela devrait être un bug déposé/corrigé avant qu'il ne soit mis en ligne ... Je ne sais pas comment les procédures sont à ce sujet avec Apple sont cependant.

1
Nick Craver

Vous voulez ce correctif pour le bug d'orientation sur iphone et ipad. lisez-le ici: http: //www.blog.highub. com/mobile-2/a-fix-for-iphone-viewport-scale-bug /

github dernière version ici: https://Gist.github.com/901295 utilisez la deuxième version de la page.

1
B-Money

Vérifiez votre version d'iOS.

L'événement "orientationchange" ne fonctionne pas dans iOS 3. *, mais il le fait dans 4. *

0
JoeDuncan
  1. faites une belle vérification si votre plate-forme est iPad,

  2. gérer le changement d'orientation spécifique à un événement iOS en interceptant la fenêtre.

    if(navigator.platform == 'iPad') {
    window.onorientationchange = function() {
        // handle orientationchange event
        // (here you can take advantage of the orientation property
        //     - see the good answer above by Vincent)
    }       
}
0
SteakOverflow