Comment verrouiller l'orientation en mode portrait dans une Application web iPhone?

C'est une solution assez hacky, 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 dans un div juste à l'intérieur de l'élément body. Il fait pivoter ce div 90 degrés en mode paysage-retour au portrait.

Laissé comme un exercice au lecteur: la div tourne autour de son centerpoint, donc sa position devra probablement être ajustée à moins qu'elle ne soit parfaitement carrée.

En outre, il y a un problème visuel peu attrayant. Lorsque vous changez d'orientation, Safari tourne lentement, puis le div de niveau supérieur s'enclenche à 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, puis Safari, le contenu de votre page. De plus séduisant!

Cette réponse n'est pas encore possible, mais je la poste pour les "générations futures". Espérons qu'un jour nous pourrons le faire 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

Basé sur la table de compatibilité du navigateur MDN et l'article suivant, il semble qu'il y ait un certain soutien dans certaines versions de IE et Opera:
http://menacingcloud.com/?c=cssViewportOrMetaTag

Cette spécification D'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 dans une balise meta, 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 méthode CSS seulement de tourner l'écran en utilisant des requêtes multimédias. Les requêtes sont basées sur les tailles d'écran que j'ai trouvé ici. 480px semblait être un bon car aucun/quelques appareils avaient plus de 480px largeur ou moins de 480px 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 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 raconter l'utilisateur de mettre son téléphone en mode portrait. Comme il est 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 un soludion prêt à l'emploi...

Comme pour mai 2015,

Il y a 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");

// 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 permettent pas la limitation appropriée qu'un simple hack est votre meilleur pari depuis 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)"

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

Détectez D'abord l'orientation ou la réorientation du périphérique et, en utilisant JavaScript, ajoutez un nom de classe à votre élément d'emballage (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 le périphérique 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 sommes à il.

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

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

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

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 nécessaire par quelqu'un d'autre:

    $(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);
    });

Cliquez sur 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 faire ce travail dans l'année 2015, nous avons besoin de:

• Cordova (toute version bien que quelque chose au-dessus de 4.0 soit mieux)
• PhoneGap (vous pouvez même utiliser PhoneGap, les plugins sont compatibles)

Et un de ces plugins selon votre version Cordova:

• net.yoik.cordoue.greffon.screenorientation (Cordova

Cordova plugin ajouter net.yoik.cordoue.greffon.screenorientation

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

Cordova plugin ajouter cordova-plugin-écran-l'orientation

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

screen.lockOrientation('landscape');

Pour le déverrouiller:

screen.unlockOrientation();

Possible orientations:

• Portrait-primaire L'orientation est dans le principal mode portrait.

• Portrait-secondaire L'orientation dans le secondaire en mode portrait.

• Paysage-primaire L'orientation est dans le principal mode paysage.

• Paysage-secondaire L'orientation dans le secondaire en mode paysage.

• Portrait L'orientation est soit portrait-primaire ou portrait-secondaire (capteur).

• Paysage l'orientation est soit paysage-primaire, soit paysage-secondaire (capteur).