web-dev-qa-db-fra.com

Empêcher le changement d'orientation dans iOS Safari

Est-il possible d'éviter la transition vers la vue paysage dans Safari pour iOS lorsque l'appareil est tourné?

iOS Safari a l'événement "orentationchange", j'ai essayé de l'intercepter et de désactiver le comportement par défaut, comme ceci:

<html>
<head>
<script type="text/javascript">
function changeOrientation(event) {
    alert("Rotate");
    event.preventDefault();
}
</script>
</head>
<body onorientationchange="changeOrientation(event);">
PAGE CONTENT
</body>
</html>

mais lors du test de la page sur mon iPhone, lorsque je fais pivoter l'appareil, l'alerte s'affiche, mais la vue bascule en mode paysage. Il semble que event.preventDefault () n'arrête pas la rotation.

Existe-t-il un moyen de bloquer ce comportement?

javascripthtmliossafariorientation
32
Davide Gualano

Il n'y a aucun moyen de forcer une orientation particulière dans Mobile Safari; il tourne toujours automatiquement lorsque l'utilisateur fait pivoter son appareil.

Vous pouvez peut-être afficher quelque chose pour les orientations non prises en charge en informant l'utilisateur que les orientations ne sont pas prises en charge et qu'il doit faire pivoter l'appareil vers l'arrière pour utiliser votre application Web.

21
BoltClock

Jonathan Snook a un moyen de contourner ce problème. Dans ses diapositives ici , il montre comment (en quelque sorte) verrouiller le portrait (voir diapositives 54 et 55).

Le code JS de ces diapositives:

window.addEventListener('orientationchange', function () {
    if (window.orientation == -90) {
        document.getElementById('orient').className = 'orientright';
    }
    if (window.orientation == 90) {
        document.getElementById('orient').className = 'orientleft';
    }
    if (window.orientation == 0) {
        document.getElementById('orient').className = '';
    }
}, true);

et le CSS:

.orientleft #Shell {
    -webkit-transform: rotate(-90deg);
    -webkit-transform-Origin:160px 160px;
}

.orientright #Shell {
    -webkit-transform: rotate(90deg);
    -webkit-transform-Origin:230px 230px;
}

J'ai essayé de faire fonctionner cela pour paysage sur l'iPhone, mais cela n'a jamais semblé correct à 100%. Je suis cependant venu avec le code jQueryian suivant. Ce serait dans la fonction déjà disponible. Notez également: c'était dans un contexte "enregistré sur l'écran d'accueil", et je pense que cela a modifié la position de la tranform-Origin.

$(window).bind('orientationchange', function(e, onready){
   if(onready){
       $(document.body).addClass('portrait-onready');
   }
   if (Math.abs(window.orientation) != 90){
       $(document.body).addClass('portrait');
   } 
   else {
       $(document.body).removeClass('portrait').removeClass('portrait-onready');
   }
});
$(window).trigger('orientationchange', true); // fire the orientation change event at the start, to make sure

Et le CSS:

.portrait {
    -webkit-transform: rotate(90deg);
    -webkit-transform-Origin: 200px 190px;
}
.portrait-onready {
    -webkit-transform: rotate(90deg);
    -webkit-transform-Origin: 165px 150px;
}

J'espère que cela aide quelqu'un à se rapprocher du résultat souhaité ...

53
fisherwebdev

Un spec pour implémenter cette fonctionnalité a été proposé.

Voir aussi ce bogue Chromium pour des informations supplémentaires (on ne sait toujours pas s'il sera implémenté dans WebKit ou Chromium).

5
Boris Smus

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.

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'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 le périphérique est en mode paysage, utilisez CSS pour définir la largeur du corps à la hauteur de la fenêtre et la hauteur du corps à 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 (translatez) en position.

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

Peut-être dans un nouvel avenir ...

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 sur Opera ou Safari pour le moment.

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");
3
Fabio Nolasco

La solution suivante semble fonctionner pour moi sur iPhone4, 5, 6 et 6+ à partir de juin 2016.

<script>
  /**
   * we are locking mobile devices orientation to portrait mode only
   */
  var devWidth, devHeight;
  window.addEventListener('load', function() {
    devWidth  = screen.width;
    devHeight = screen.height;
  });
  window.addEventListener('orientationchange', function () {
    if (devWidth < 768 && (window.orientation === 90 || window.orientation == -90)) {
      document.body.style.width = devWidth + 'px';
      document.body.style.height = devHeight + 'px';
      document.body.style.transform = 'rotate(90deg)';
      document.body.style.transformOrigin = ''+(devHeight/2)+'px '+(devHeight/2)+'px';
    } else {
      document.body.removeAttribute('style');
    }
  }, true);
</script>
1
allenhwkim

Je pense que dans notre cas où nous devons fournir une vue cohérente des données que nous affichons à l'écran pour les enquêtes médicales, la rotation de l'écran de l'appareil ne peut pas être autorisée. Nous concevons l'application pour travailler en portrait. La meilleure solution à utiliser est donc de la verrouiller, ce qui ne peut pas être fait via le navigateur, ou d'afficher une erreur/un message indiquant que l'application ne peut pas être utilisée tant que l'orientation n'est pas fixée.

1
Bill Calderwood