web-dev-qa-db-fra.com

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

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

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

orientationiphone
153
Kevin

Vous pouvez spécifier des styles CSS basés sur l'orientation de la fenêtre: Ciblez le navigateur avec body [orient = "landscape"] ou body [orient = "portrait"].

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

Pourtant...

L’approche d’Apple sur ce problème consiste à permettre au développeur de modifier le code CSS en fonction du changement d’orientation, sans pour autant empêcher une réorientation complète. J'ai trouvé une question similaire ailleurs:

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

69
Scott Fox

C'est une jolie solution, 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 l'intégralité du contenu de votre page vive dans un div, juste à l'intérieur de l'élément body. Il tourne ce div de 90 degrés en mode paysage - retour au portrait.

Exercice laissé au lecteur: la div tourne autour de son point central; sa position devra donc probablement être ajustée sauf si elle est parfaitement carrée.

En outre, 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 sur 90 degrés différents. Pour encore plus de plaisir, ajoutez

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

à votre CSS. Lorsque le périphérique tourne, Safari le fait, puis le contenu de votre page le fait. Envoûtant!

96
Grumdrig

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

@viewport {
    orientation: portrait;
}

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 semblerait que certaines versions de IE et Opera soient prises en charge:
http://menacingcloud.com/?c=cssViewportOrMetaTag

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

J'avais supposé que, parce que c'était possible avec la règle @viewport proposée, cela serait possible en définissant orientation dans les paramètres de la fenêtre d'affichage dans une balise meta, mais je n'ai pas réussi à ceci jusqu'à présent.

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

35
xdhmoore

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'); 
});
19
Andrei Schneider

Screen.lockOrientation() résout ce problème, même si le support technique n'est pas universel à l'époque (avril 2017):

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

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

5
TMan

Je suis venu avec cette seule méthode CSS de rotation de l'écran en utilisant des requêtes de médias. Les requêtes sont basées sur les tailles d'écran que j'ai trouvé ici . 480px semblait être un avantage, car peu de périphériques avaient une largeur supérieure à 480px ou une hauteur inférieure à 480px.

@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
    }
}
5
Bill

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

3
escapedcat

Peut-être que dans un nouvel avenir, il aura une soludion hors du commun ...

Pour mai 2015,

il y a une fonctionnalité expérimentale qui fait ça.

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 des navigateurs compatibles:

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

lockOrientation("landscape-primary");
2
Fabio Nolasco
// 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, préservera au moins votre mise en page si c'est ce que vous recherchez.

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

0
dgoldston

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)"
0
Philip

Bien que vous ne puissiez 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 du périphérique et, à l'aide de JavaScript, ajoutez un nom de classe à votre élément d'habillage (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 la transformation Origin 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 body et glissez-le (traduit) en position.

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

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);
    });
0
Yazid Erman