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


160

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.


1
La seule raison de créer une application Web et non une application native est qu'elle peut être multiplateforme, pourquoi voudriez-vous créer une application Web spécifique à l'iPhone, envisagez-vous d'écrire du code supplémentaire pour verrouiller d'autres téléphones ???


1
Je suis intéressé par une solution qui soit pour les "petits écrans" et pas seulement pour les choses qui sont 320px et faites par Apple.
sheriffderek

Réponses:


70

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


Merci mais, je fais déjà cette partie, ce que je veux vraiment, c'est empêcher Mobile Safari de ne pas changer d'orientation sur moi lorsque l'utilisateur incline le téléphone.
Kevin

4
L'approche d'Apple à ce problème permet 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: ask.metafilter.com/99784/…
Scott Fox

2
J'ai vu certains sites afficher un message en mode paysage informant l'utilisateur que ce site ne peut être affiché qu'en orientation portrait - juste une autre option à considérer.
Jayden Lawson

97

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!


3
Grumdrig, tu es mon héros! C'est l'astuce la plus utile et la plus fonctionnelle que j'ai jamais vue sur ce site. Merci beaucoup!
noober

Avant de lire cette réponse, j'étais sur le point de suggérer sur la réponse "acceptée" des commentaires que quelqu'un d'autre devrait essayer ceci et me dire si cela a fonctionné. Je suis vraiment content que quelqu'un l'ait déjà fait et qu'il l'ait fait!
Lane

et si le div est rectangulaire? Quelle est la formule pour définir correctement l'origine de la transformation? TA
superjos

Vous pouvez également le contrôler par l'option "Orientation de l'interface prise en charge" sur xCode, sous les informations de développement Iphone / iPod. A bien fonctionné
Rodrigo Dias

1
ne pouvons-nous pas faire pivoter le corps lui-même directement? Dites, $ ("body"). Css ("- webkit-transform",! Portrait? "Rotate (-90deg)": "");
Krsna Chaitanya

39

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.


En 10/2019, cette nouvelle fonctionnalité ne fonctionnera pas encore. S'il-vous-plaît nous garder en alertes. Merci.
RainCast

2
En effet, cela a pris tellement de temps que je me demande si cela le sera jamais. J'ai ajouté un lien vers la page «CanIUse».
xdhmoore

Merci. êtes-vous le propriétaire de cette fonctionnalité? Je ne comprends pas très bien comment une nouvelle fonctionnalité css est publiée. Dans mon hypothèse, l'organisation css parle à chacun des principaux propriétaires de produits de navigateur et leur demande de le soutenir? Qui contrôle le processus? Je suis très curieux.
RainCast

Ha non juste un autre développeur. Vous recherchez le W3C.
xdhmoore

19

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

comment calculez-vous ces nombres pour l'origine de la transformation?
superjos

3
Avertissement!!! Tous les appareils ne rapportent pas les mêmes valeurs d'orientation, donc il ne peut pas être invoqué sur matthewgifford.com/blog/2011/12/22
Rob

6

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
    }
}

+1 belle solution. J'ai un pied de page qui est positionné en bas. Une idée comment l'afficher après la rotation?
Cybrix

1
Que diriez-vous d'utiliser (orientation: paysage) dans la requête multimédia au lieu de valeurs de pixels spécifiques? Ou une valeur de pixel exacte doit-elle être définie?
Justin Putney

J'ai utilisé une valeur de pixel car vous devez définir une valeur exacte sur le html, qui doit correspondre à la hauteur de l'écran (en mode paysage - donc largeur de l'écran). Donc, utiliser orientation: landscapene fonctionnerait pas si bien dans mon exemple @JustinPutney
Projet de loi

1
De MDN: "Remarque: cette valeur ne correspond pas à l'orientation réelle de l'appareil. L'ouverture du clavier virtuel sur la plupart des appareils en orientation portrait entraînera une plus grande largeur de la fenêtre d'affichage, ce qui obligera le navigateur à utiliser des styles paysage au lieu de portrait. "
sheriffderek

2
Règles d'orientation @media --- ouais. Je pensais qu'ils étaient la voie à suivre jusqu'à ce que je lise ceci: developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
sheriffderek



2

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");

Je l'utilise dans mon code javascript sur mon site wordpress comme: screen.lockOrientation ("landscape"); et ça ne marche pas. J'obtiens: jQuery (...). LockOrientation n'est pas une fonction. Dois-je implémenter un plugin ou un framework?
Alex Stanese

1

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%);
}

0
// 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.


0

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

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

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>


-3

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).

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.