Détecter l'orientation de la fenêtre d'affichage, si l'orientation correspond au message d'alerte d'affichage Portrait informant l'utilisateur des instructions

Question

Je suis en construction d'un site web spécifiquement pour les appareils mobiles. Il y a une page en particulier qui est optimisé pour un affichage en mode paysage.

Est-il un moyen de détecter si l'utilisateur visite la page de visualisation en mode Portrait et, dans l'affirmative, l'affichage d'un message informant l'utilisateur que la page est optimisé pour un affichage en mode paysage? Si l'utilisateur est déjà affichage en mode paysage alors pas de message apparaît.

Donc, fondamentalement, je veux que le site afin de détecter la fenêtre d'affichage de l'orientation, si l'orientation est le Portrait, puis afficher un message d'alerte informant l'utilisateur que cette page est optimisé pour un affichage en Paysage de la mode.

Merci beaucoup, Dan

Answer 1

 if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}
 

jQuery Mobile a un événement qui gère le changement de cette propriété ... si vous voulez avertir si quelqu'un tourne plus tard - orientationchange

De plus, après quelques recherches sur Google, consultez window.orientation (qui, je crois, se mesure en degrés ...

Answer 2

Vous pouvez également utiliser window.watchMedia , que j'utilise et préfère car il ressemble beaucoup à la syntaxe CSS:

 if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}
 

Testé sur iPad 2.

Answer 3

David Walsh a une approche meilleure et directe.

 // Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);
 

Au cours de ces modifications, la propriété window.orientation peut être modifiée. Une valeur de 0 correspond à une vue en portrait, -90 à un paysage tourné à droite et 90 à un paysage.

http://davidwalsh.name/orientation-change

Answer 4

Vous pouvez utiliser CSS3:

 @media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}
 

Answer 5

Il ya quelques façons de le faire, par exemple:

• Vérifiez window.orientation de la valeur
• Comparer innerHeight vs innerWidth

Vous pouvez adapter l'une des méthodes ci-dessous.

---

Vérifiez si l'appareil est en mode portrait

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

Vérifiez si l'appareil est en mode paysage

function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}

Exemple d'utilisation

if (isPortrait()) {
    alert("This page is best viewed in landscape mode");
}

---

Comment puis-je détecter le changement d'orientation?

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});