J'ai trouvé ce code de test d'orientation ci-dessous à la recherche de matériel de référence JQTouch. Cela fonctionne correctement dans le simulateur iOS sur Safari mobile mais n'est pas géré correctement dans Phonegap. Mon projet rencontre le même problème qui tue cette page de test. Existe-t-il un moyen de détecter le changement d'orientation à l'aide de JavaScript dans Phonegap?
window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch (orientation) {
case 0:
/* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "portrait");
/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom).";
break;
case 90:
/* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
/* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
break;
}
}
Réponses:
C'est ce que je fais:
Mise à jour de mai 2019:
window.orientation
est une fonctionnalité obsolète et non prise en charge par la plupart des navigateurs selon MDN . L'orientationchange
événement est associé à window.orientation et ne doit donc probablement pas être utilisé.la source
window.onorientationchange = function() { setTimeout(functionName, 0); };
J'utilise
window.onresize = function(){ checkOrientation(); }
Et dans checkOrientation, vous pouvez utiliser window.orientation ou la vérification de la largeur du corps, mais l'idée est que "window.onresize" est la méthode la plus multi-navigateur, du moins avec la majorité des navigateurs mobiles et de bureau que j'ai possibilité de tester avec.la source
la source
resize
événement. Cependant, IIRC, ces requêtes ne fonctionneront pas correctement avec le clavier en place.Je suis assez nouveau sur iOS et Phonegap également, mais j'ai pu le faire en ajoutant un eventListener. J'ai fait la même chose (en utilisant l'exemple auquel vous faites référence) et je n'ai pas pu le faire fonctionner. Mais cela semblait faire l'affaire:
Vous aurez peut-être un peu de chance en recherchant le terme "orientation" dans le groupe Google PhoneGap .
Un exemple que j'ai lu comme exemple sur la façon de détecter l'orientation était Pie Guy: ( jeu , fichier js ). C'est similaire au code que vous avez publié, mais comme vous ... je n'ai pas pu le faire fonctionner.
Une mise en garde: le eventListener a fonctionné pour moi, mais je ne suis pas sûr qu'il s'agisse d'une approche trop intensive. Jusqu'à présent, c'est la seule façon qui a fonctionné pour moi, mais je ne sais pas s'il existe de meilleures façons plus rationalisées.
UPDATE a corrigé le code ci-dessus, cela fonctionne maintenant
la source
Tout en travaillant avec l'
orientationchange
événement, j'avais besoin d'un délai d'attente pour obtenir les dimensions correctes des éléments de la page, mais matchMedia a bien fonctionné. Mon code final:la source
Je crois que la bonne réponse a déjà été publiée et acceptée, mais il y a un problème que j'ai moi-même vécu et que d'autres ont mentionné ici.
Sur certaines plates-formes, diverses propriétés telles que les dimensions de la fenêtre (
window.innerWidth
,window.innerHeight
) et lawindow.orientation
propriété ne seront pas mises à jour avant le"orientationchange"
déclenchement de l'événement . Plusieurs fois, la propriétéwindow.orientation
estundefined
pour quelques millisecondes après le tir de"orientationchange"
(au moins c'est dans Chrome sur iOS).Le meilleur moyen que j'ai trouvé pour gérer ce problème était:
Je vérifie si l'orientation n'est pas définie ou si l'orientation est égale à la dernière orientation détectée. Si l'un ou l'autre est vrai, j'attends dix millisecondes, puis j'analyse à nouveau l'orientation. Si l'orientation est une valeur correcte, j'appelle le
showXOrientation
fonctions. Si l'orientation n'est pas valide, je continue à boucler ma fonction de vérification, en attendant dix millisecondes à chaque fois, jusqu'à ce qu'elle soit valide.Maintenant, je créerais un JSFiddle pour cela, comme je le faisais d'habitude, mais JSFiddle ne fonctionnait pas pour moi et mon bug de support a été fermé car personne d'autre ne signale le même problème. Si quelqu'un d'autre veut transformer cela en JSFiddle, veuillez continuer.
Merci! J'espère que ça aide!
la source
Voici ce que j'ai fait:
la source
Bien que la question ne concerne que l'utilisation de PhoneGap et iOS, et bien qu'elle ait déjà été répondue, je peux ajouter quelques points à la question plus large de la détection de l'orientation de l'écran avec JS en 2019:
window.orientation
La propriété est obsolète et n'est pas prise en charge par les navigateurs Android . Il existe une propriété plus récente qui fournit plus d'informations sur l'orientation -screen.orientation
. Mais il est encore expérimental et non pris en charge par iOS Safari . Donc , pour obtenir le meilleur résultat que vous avez probablement besoin d'utiliser la combinaison des deux:const angle = screen.orientation ? screen.orientation.angle : window.orientation
.Comme @benallansmith l'a mentionné dans son commentaire , l'
window.onorientationchange
événement est déclenché avantwindow.onresize
, vous n'obtiendrez donc pas les dimensions réelles de l'écran à moins que vous n'ajoutiez un délai après l'événement orientationchange.Il existe un plugin d'orientation d'écran Cordova pour prendre en charge les anciens navigateurs mobiles, mais je pense qu'il n'est pas nécessaire de l'utiliser de nos jours.
Il y avait aussi un
screen.onorientationchange
événement, mais il est obsolète et ne doit pas être utilisé. Ajouté juste pour que la réponse soit complète.Dans mon cas d'utilisation, je ne me souciais pas beaucoup de l'orientation réelle, mais plutôt de la largeur et de la hauteur réelles de la fenêtre, qui changent évidemment avec l'orientation. J'ai donc utilisé l'
resize
événement pour éviter de gérer les délais entre l'orientationchange
événement et l'actualisation des dimensions de la fenêtre:Note 1: J'ai utilisé la syntaxe EcmaScript 6 ici, assurez-vous de la compiler vers ES5 si nécessaire.
Remarque 2: l'
window.onresize
événement est également déclenché lorsque le clavier virtuel est basculé , pas seulement lorsque l'orientation change.la source
J'ai trouvé ce code pour détecter si l'appareil est en orientation paysage et, dans ce cas, ajouter une page de garde disant "changer d'orientation pour voir le site". Cela fonctionne sur les téléphones iOS, Android et Windows. Je pense que c'est très utile car c'est assez élégant et évite de définir une vue paysage pour le site mobile. Le code fonctionne très bien. La seule chose qui n'est pas complètement satisfaisante est que si quelqu'un charge la page en mode paysage, la page de démarrage n'apparaît pas.
Et le HTML:
<div id="alert" class="hide"> <div id="content">This site is not thought to be viewed in landscape mode, please turn your device </div> </div>
la source
la source
Ce qui suit a fonctionné pour moi:
J'avais besoin du délai car la valeur de
window.orientation
ne se met pas à jour tout de suitela source
Je crée une application jQTouch dans PhoneGap pour iPhone. Je me bats avec ce problème depuis des jours. J'ai vu la solution Eventlistener suggérée à plusieurs reprises, mais je n'ai tout simplement pas pu la faire fonctionner.
En fin de compte, j'ai trouvé une solution différente. Il vérifie essentiellement la largeur du corps périodiquement à l'aide de Settimeout. Si la largeur est de 320 alors l'orientation est portrait, si 480 alors paysage. Ensuite, si l'orientation a changé depuis la dernière vérification, il déclenchera soit une fonction de trucs de portrait, soit une fonction de trucs de paysage où vous pouvez faire ce que vous voulez pour chaque orientation.
Code (note, je sais qu'il y a des répétitions dans le code, je n'ai pas encore pris la peine de le réduire!):
la source
onresize
événement qui se déclenchera immédiatement, pas dans 500 millisecondes 2) Ce code est spécifique à Android, utilisezonorientationchange
plutôt pour iPhone 3) Testez s'il est pris en charge dans le navigateur:"onorientationchange" in window