Comment verrouiller l'orientation en mode portrait dans une application Web iPhone?

Je crée une application Web iPhone et je souhaite verrouiller l'orientation en mode portrait. Est-ce possible? Existe-t-il des extensions de kit Web pour ce faire?

Veuillez noter qu'il s'agit d'une application écrite en HTML et JavaScript pour Mobile Safari, ce n'est PAS une application native écrite en Objective-C.

Vous pouvez spécifier des styles CSS en fonction de l'orientation de la fenêtre: Ciblez le navigateur avec le corps [orient = "paysage"] ou le corps [orient = "portrait"]

http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

Toutefois...

L'approche d'Apple à ce problème est de permettre au développeur de modifier le CSS en fonction du changement d'orientation, mais pas d'empêcher complètement la réorientation. J'ai trouvé une question similaire ailleurs:

http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari

C'est une solution assez piratée, mais c'est au moins quelque chose (?). L'idée est d'utiliser une transformation CSS pour faire pivoter le contenu de votre page en mode quasi-portrait. Voici le code JavaScript (exprimé en jQuery) pour vous aider à démarrer:

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

Le code s'attend à ce que tout le contenu de votre page vive à l'intérieur d'un div juste à l'intérieur de l'élément body. Il fait pivoter ce div de 90 degrés en mode paysage - retour au portrait.

À gauche comme exercice pour le lecteur: le div tourne autour de son point central, donc sa position devra probablement être ajustée à moins qu'elle ne soit parfaitement carrée.

De plus, il y a un problème visuel peu attrayant. Lorsque vous changez d'orientation, Safari tourne lentement, puis la division de niveau supérieur s'aligne à 90 degrés différents. Pour encore plus de plaisir, ajoutez

body > div { -webkit-transition: all 1s ease-in-out; }

à votre CSS. Lorsque l'appareil tourne, Safari le fait, puis le contenu de votre page le fait. Séduisant!

Cette réponse n'est pas encore possible, mais je la publie pour les "générations futures". Espérons qu'un jour nous pourrons le faire via la règle CSS @viewport:

@viewport {
    orientation: portrait;
}

Voici la page «Puis-je utiliser» (à partir de 2019 uniquement IE et Edge):
https://caniuse.com/#feat=mdn-css_at-rules_viewport_orientation

Spec (en cours):
https://drafts.csswg.org/css-device-adapt/#orientation-desc

MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation

D'après le tableau de compatibilité du navigateur MDN et l'article suivant, il semble que certaines versions d'IE et d'Opera soient prises en charge:
http://menacingcloud.com/?c=cssViewportOrMetaTag

Cette spécification de l'API JS semble également pertinente:
https://w3c.github.io/screen-orientation/

J'avais supposé que parce que c'était possible avec la @viewportrègle proposée , cela serait possible en définissant les paramètres orientationde la fenêtre d'affichage dans une metabalise, mais je n'ai eu aucun succès avec cela jusqu'à présent.

N'hésitez pas à mettre à jour cette réponse à mesure que les choses s'améliorent.

Le code suivant a été utilisé dans notre jeu html5.

$(document).ready(function () {
     $(window)    
          .bind('orientationchange', function(){
               if (window.orientation % 180 == 0){
                   $(document.body).css("-webkit-transform-origin", "")
                       .css("-webkit-transform", "");               
               } 
               else {                   
                   if ( window.orientation > 0) { //clockwise
                     $(document.body).css("-webkit-transform-origin", "200px 190px")
                       .css("-webkit-transform",  "rotate(-90deg)");  
                   }
                   else {
                     $(document.body).css("-webkit-transform-origin", "280px 190px")
                       .css("-webkit-transform",  "rotate(90deg)"); 
                   }
               }
           })
          .trigger('orientationchange'); 
});

Je suis venu avec cette seule méthode CSS pour faire pivoter l'écran à l'aide de requêtes multimédias. Les requêtes sont basées sur les tailles d'écran que j'ai trouvées ici . 480px semblait être une bonne chose car peu d'appareils avaient plus de 480px de largeur ou moins de 480px de hauteur.

@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        width: 320px; /*this is the iPhone screen width.*/
        position: absolute;
        top: 100%;
            left: 0
    }
}

Screen.lockOrientation() résout ce problème, bien que le support soit moins qu'universel à l'époque (avril 2017):

https://www.w3.org/TR/screen-orientation/

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

J'aime l'idée de dire à l'utilisateur de remettre son téléphone en mode portrait. Comme mentionné ici: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... mais en utilisant CSS au lieu de JavaScript.

Peut-être que dans un nouvel avenir, il aura une solution prête à l'emploi ...

Quant à mai 2015,

il existe une fonctionnalité expérimentale qui fait cela.

Mais cela ne fonctionne que sur Firefox 18+, IE11 + et Chrome 38+.

Cependant, cela ne fonctionne pas encore sur Opera ou Safari.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility

Voici le code actuel pour les navigateurs compatibles:

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

lockOrientation("landscape-primary");

Bien que vous ne puissiez pas empêcher le changement d'orientation de prendre effet, vous ne pouvez émuler aucun changement comme indiqué dans d'autres réponses.

Commencez par détecter l'orientation ou la réorientation de l'appareil et, à l'aide de JavaScript, ajoutez un nom de classe à votre élément d'encapsulation (dans cet exemple, j'utilise la balise body).

function deviceOrientation() {
  var body = document.body;
  switch(window.orientation) {
    case 90:
      body.classList = '';
      body.classList.add('rotation90');
      break;
    case -90:
      body.classList = '';
      body.classList.add('rotation-90');
      break;
    default:
      body.classList = '';
      body.classList.add('portrait');
      break;
  }
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();

Ensuite, si l'appareil est en mode paysage, utilisez CSS pour définir la largeur du corps sur la hauteur de la fenêtre et la hauteur du corps sur la largeur de la fenêtre. Et définissons l'origine de la transformation pendant que nous y sommes.

@media screen and (orientation: landscape) {
  body {
    width: 100vh;
    height: 100vw;
    transform-origin: 0 0;
  }
}

Maintenant, réorientez l'élément du corps et faites-le glisser (traduisez) en position.

body.rotation-90 {
  transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
  transform: rotate(-90deg) translateX(-100%);
}

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

Ceci, ou une solution CSS similaire, conservera au moins votre mise en page si c'est ce que vous recherchez.

La solution racine tient compte des capacités de l'appareil plutôt que de tenter de les limiter. Si l'appareil ne vous permet pas la limitation appropriée, un simple piratage est votre meilleur pari car la conception est essentiellement incomplète. Le plus simple sera le mieux.

Dans le café si quelqu'un en a besoin.

    $(window).bind 'orientationchange', ->
        if window.orientation % 180 == 0
            $(document.body).css
                "-webkit-transform-origin" : ''
                "-webkit-transform" : ''
        else
            if window.orientation > 0
                $(document.body).css
                    "-webkit-transform-origin" : "200px 190px"
                    "-webkit-transform" : "rotate(-90deg)"
            else
                $(document.body).css
                    "-webkit-transform-origin" : "280px 190px"
                    "-webkit-transform" : "rotate(90deg)"

Inspiré de la réponse de @ Grumdrig, et parce que certaines des instructions utilisées ne fonctionneraient pas, je suggère le script suivant si quelqu'un d'autre en a besoin:

    $(document).ready(function () {

      function reorient(e) {
        var orientation = window.screen.orientation.type;
        $("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
      }
    $(window).on("orientationchange",function(){
        reorient();
    });
      window.setTimeout(reorient, 0);
    });

J'ai un problème similaire, mais pour faire du paysage ... je pense que le code ci-dessous devrait faire l'affaire:

//This code consider you are using the fullscreen portrait mode
function processOrientation(forceOrientation) {
  var orientation = window.orientation;
  if (forceOrientation != undefined)
    orientation = forceOrientation;
  var domElement = document.getElementById('fullscreen-element-div');
  switch(orientation) {
    case 90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(-90deg)";
      break;
    case -90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(90deg)";
      break;
    default:
      domElement.style.width = "100vw";
      domElement.style.height = "100vh";
      domElement.style.transformOrigin="";
      domElement.style.transform="";
      break;
  }
}
window.addEventListener('orientationchange', processOrientation);
processOrientation();

<html>
<head></head>
<body style="margin:0;padding:0;overflow: hidden;">
  <div id="fullscreen-element-div" style="background-color:#00ff00;width:100vw;height:100vh;margin:0;padding:0"> Test
  <br>
  <input type="button" value="force 90" onclick="processOrientation(90);" /><br>
  <input type="button" value="force -90" onclick="processOrientation(-90);" /><br>
  <input type="button" value="back to normal" onclick="processOrientation();" />
  </div>
</body>
</html>

Cliquez ici pour un tutoriel et un exemple de travail de mon site Web.

Vous n'avez plus besoin d'utiliser des hacks juste pour regarder l'orientation de l'écran mobile jQuery et vous ne devriez plus utiliser PhoneGap, sauf si vous utilisez réellement PhoneGap.

Pour que cela fonctionne en 2015, nous avons besoin de:

• Cordova (toute version bien que tout ce qui est supérieur à 4.0 est meilleur)
• PhoneGap (vous pouvez même utiliser PhoneGap, les plugins sont compatibles)

Et l'un de ces plugins en fonction de votre version Cordova:

• net.yoik.cordova.plugins.screenorientation (Cordova <4)

plugin cordova ajouter net.yoik.cordova.plugins.screenorientation

• plugin cordova ajouter cordova-plugin-screen-orientation (Cordova> = 4)

plugin cordova ajouter cordova-plugin-screen-orientation

Et pour verrouiller l'orientation de l'écran, utilisez simplement cette fonction:

screen.lockOrientation('landscape');

Pour le déverrouiller:

screen.unlockOrientation();

Orientations possibles:

• portrait-primary L'orientation est en mode portrait principal.

• portrait-secondaire L'orientation est en mode portrait secondaire.

• paysage-primaire L'orientation est en mode paysage principal.

• paysage secondaire L'orientation est en mode paysage secondaire.

• portrait L'orientation est soit portrait primaire, soit portrait secondaire (capteur).

• paysage L'orientation est soit paysage primaire, soit paysage secondaire (capteur).