Comment détecter correctement le changement d'orientation à l'aide de Phonegap sur iOS?
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 traité 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;
}
}
C'est ce que je fais:
function doOnOrientationChange() {
switch(window.orientation) {
case -90 || 90:
alert('landscape');
break;
default:
alert('portrait');
break;
}
}
window.addEventListener('orientationchange', doOnOrientationChange);
// Initial execution if needed
doOnOrientationChange(); Mise à jour de mai 2019: window.orientation est une fonctionnalité obsolète et n'est pas prise en charge par la plupart des navigateurs selon MDN . L'événement orientationchange est associé à window.orientation et ne devrait donc probablement pas être utilisé.
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 utilisée sur tous les navigateurs, du moins avec la majorité des navigateurs de J'ai eu l'occasion de tester avec.
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 que vous avez cité) et je n'ai pas réussi à le faire fonctionner. Mais cela semblait faire l'affaire:
// Event listener to determine change (horizontal/portrait)
window.addEventListener("orientationchange", updateOrientation);
function updateOrientation(e) {
switch (e.orientation)
{
case 0:
// Do your thing
break;
case -90:
// Do your thing
break;
case 90:
// Do your thing
break;
default:
break;
}
}
Vous aurez peut-être de la chance en recherchant le groupe Google PhoneGap pour le terme "orientation" .
Un exemple que j'ai lu comme exemple sur la façon de détecter une orientation était Pie Guy: ( game , fichier js ). C'est semblable au code que vous avez posté, mais comme vous ... Je ne pouvais pas le faire fonctionner.
Une mise en garde: eventListener a fonctionné pour moi, mais je ne suis pas sûr qu'il s'agisse d'une approche trop intensive. Jusqu'ici, c'est la seule façon qui a fonctionné pour moi, mais je ne sais pas s'il existe de meilleures méthodes, plus simples.
UPDATE corrige le code ci-dessus, il fonctionne maintenant
if (window.matchMedia("(orientation: portrait)").matches) {
// you're in PORTRAIT mode
}
if (window.matchMedia("(orientation: landscape)").matches) {
// you're in LANDSCAPE mode
}
Lorsque je travaillais avec l'événement orientationchange, 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:
var matchMedia = window.msMatchMedia || window.MozMatchMedia || window.WebkitMatchMedia || window.matchMedia;
if (typeof(matchMedia) !== 'undefined') {
// use matchMedia function to detect orientationchange
window.matchMedia('(orientation: portrait)').addListener(function() {
// your code ...
});
} else {
// use orientationchange event with timeout (fires to early)
$(window).on('orientationchange', function() {
window.setTimeout(function() {
// your code ...
}, 300)
});
}
Je pense que la réponse correcte a déjà été postée et acceptée, mais il y a un problème que j'ai moi-même rencontré 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 la propriété window.orientation ne seront pas mises à jour au moment du déclenchement de l'événement "orientationchange". Plusieurs fois, la propriété window.orientation est undefined pendant quelques millisecondes après le déclenchement de "orientationchange" (au moins dans Chrome sur iOS).
La meilleure façon pour moi de gérer ce problème était la suivante:
var handleOrientationChange = (function() {
var struct = function(){
struct.parse();
};
struct.showPortraitView = function(){
alert("Portrait Orientation: " + window.orientation);
};
struct.showLandscapeView = function(){
alert("Landscape Orientation: " + window.orientation);
};
struct.parse = function(){
switch(window.orientation){
case 0:
//Portrait Orientation
this.showPortraitView();
break;
default:
//Landscape Orientation
if(!parseInt(window.orientation)
|| window.orientation === this.lastOrientation)
setTimeout(this, 10);
else
{
this.lastOrientation = window.orientation;
this.showLandscapeView();
}
break;
}
};
struct.lastOrientation = window.orientation;
return struct;
})();
window.addEventListener("orientationchange", handleOrientationChange, false);
Je vérifie si l'orientation est indéfinie ou si l'orientation est égale à la dernière orientation détectée. Si l'une ou l'autre est vraie, j'attends dix millisecondes, puis je réanalyse l'orientation. Si l'orientation est une valeur correcte, j'appelle les fonctions showXOrientation. Si l'orientation est invalide, je continue à boucler ma fonction de vérification, en attendant dix millisecondes à chaque fois, jusqu'à ce qu'elle soit valide.
Maintenant, je ferais un JSFiddle pour cela, comme je le faisais d'habitude, mais JSFiddle n'a pas fonctionné pour moi et mon bogue de support a été fermé car personne d'autre ne rapporte le même problème. Si quelqu'un d'autre veut en faire un JSFiddle, continuez.
Merci! J'espère que ça aide!
voici ce que j'ai fait:
window.addEventListener('orientationchange', doOnOrientationChange);
function doOnOrientationChange()
{
if (screen.height > screen.width) {
console.log('portrait');
} else {
console.log('landscape');
}
}
J'ai trouvé ce code pour détecter si l'appareil est en orientation paysage et dans ce cas ajouter une page de démarrage disant "changer d'orientation pour voir le site". Il fonctionne sur iOS, Android et les téléphones Windows. Je pense que cela est très utile car il est assez élégant et évite de définir une vue de paysage pour le site mobile. Le code fonctionne très bien. La seule chose qui ne soit pas complètement satisfaisante, c'est que si quelqu'un charge la page en mode paysage, la page d'accueil n'apparaît pas.
<script>
(function() {
'use strict';
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if (isMobile.any()) {
doOnOrientationChange();
window.addEventListener('resize', doOnOrientationChange, 'false');
}
function doOnOrientationChange() {
var a = document.getElementById('alert');
var b = document.body;
var w = b.offsetWidth;
var h = b.offsetHeight;
(w / h > 1) ? (a.className = 'show', b.className = 'full-body') : (a.className = 'hide', b.className = '');
}
})();
</script>
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>
if (window.DeviceOrientationEvent) {
// Listen for orientation changes
window.addEventListener("orientationchange", orientationChangeHandler);
function orientationChangeHandler(evt) {
// Announce the new orientation number
// alert(screen.orientation);
// Find matches
var mql = window.matchMedia("(orientation: portrait)");
if (mql.matches) //true
}
}