Détecter les changements d'orientation à l'aide de javascript
est-il possible de détecter un changement d'orientation du navigateur sur l'iPad ou L'onglet Galaxy en utilisant javascript? Je pense que c'est possible en utilisant les requêtes css media.
7 réponses
mise à jour:
vous pourriez vouloir vérifier ""
jQuery mobile orientationchange
ou de la plaine JS:
window.addEventListener("orientationchange", function() {
alert(window.orientation);
}, false);
réponse plus ancienne
http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips /
Safari sur l'iPad ne supporte la fenêtre.propriété orientation, donc si nécessaire, vous pouvez l'utiliser pour déterminer si l'utilisateur est en mode horizontal ou vertical. Pour rappel de cette fonctionnalité:
window.orientation is 0 when being held vertically
window.orientation is 90 when rotated 90 degrees to the left (horizontal)
window.orientation is -90 when rotated 90 degrees to the right (horizontal)
il y a aussi l'événement orientationchange qui se déclenche sur l'objet window lorsque le dispositif est mis en rotation.
vous pouvez également utiliser les requêtes médias CSS pour déterminer si l'iPad est tenu dans une orientation verticale ou horizontale, comme:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
<script type="text/javascript">
var updateLayout = function() {
if (window.innerWidth != currentWidth) {
currentWidth = window.innerWidth;
var orient = (currentWidth == 320) ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
window.scrollTo(0, 1);
}
};
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>
Vous pouvez utiliser l'événement orientationchange comme suit:
window.addEventListener('orientationchange', function(){
/* update layout per new orientation */
});
de la fenêtre.l'orientation est-ce que vous cherchez. il y a aussi un événement onorientationchangement fonctionne pour android, iphone et, j'en suis sûr, pour ipad
ajoutant à la réponse @mplungjan, j'ai trouvé de meilleurs résultats en utilisant l'événement WebKit "natif" (Je ne sais pas comment l'appeler), ' deviceorientation ".
dans le Mozilla Developer network ils ont une bonne explication sur la façon de normaliser entre webkit et Gecko qui m'a aidé à résoudre ce problème.
vous pouvez utiliser mediaMatch pour évaluer les requêtes css media, par exemple
window
.matchMedia('(orientation: portrait)')
.addListener(function (m) {
if (m.matches) {
// portrait
} else {
// landscape
}
});
css media query fire before the orientationchange . Si vous cherchez à capturer la fin de l'événement (lorsque la rotation est terminée), voir hauteur du point de vue mobile après changement d'orientation .
un morceau facile à utiliser:
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
// alert('landscape');
$('#portrait').css({display:'none'});
$('#landscape').css({display:'block'});
break;
default:
// alert('portrait');
$('#portrait').css({display:'block'});
$('#landscape').css({display:'none'});
break;
}
}
window.addEventListener('orientationchange', doOnOrientationChange);
// First launch
doOnOrientationChange();
De " Cross-device, la croix-navigateur portrait-paysage de détection "
il s'agit de savoir si un appareil mobile est en mode portrait ou paysage; vous n'avez pas besoin de vous soucier de son orientation. Pour ce que tu sais, si tu tiens ton iPad à l'envers, c'est en mode portrait.
$(window).bind("resize", function(){
screenOrientation = ($(window).width() > $(window).height())? 90 : 0;
});
90 signifie paysage, 0 signifie portrait, cross browser, cross device.
le fenêtre.OnResize événement est disponible partout, et il est toujours tiré au bon moment; jamais trop tôt, jamais trop tard. En fait, la taille de l'écran est toujours précise.
la version JavaScript serait celle-ci, corrigez-moi s'il vous plaît si je me trompe.
function getScreenOrientation() {
screenOrientation = window.outerWidth > window.outerHeight ? 90 : 0;
console.log("screenOrientation = " + screenOrientation);
}
window.addEventListener("resize", function(event) {
getScreenOrientation();
});
getScreenOrientation();