Question 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 le périphérique est pivoté?

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 lorsque je teste 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.

Est-il possible de bloquer ce comportement?


30
2018-03-14 12:18


origine


Réponses:


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

Vous pouvez peut-être afficher quelque chose pour des orientations non prises en charge en informant l'utilisateur que les orientations ne sont pas prises en charge et qu'elles doivent faire pivoter le périphérique pour utiliser votre application Web.


19
2018-03-14 12:27



Jonathan Snook a un travail autour de 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 il n'a jamais semblé correct à 100%. Je suis venu près avec le code jQueryian suivant, cependant. Ce serait dans la fonction onready. Notez également que ceci était dans un contexte "enregistré dans l'écran d'accueil", et je pense que cela a modifié la position de l'origine de la transformation.

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

Espérons que cela aide quelqu'un à se rapprocher du résultat souhaité ...


50
2017-08-15 05:35



UNE spec pour mettre en œuvre cette fonctionnalité a été proposé.

Regarde aussi ce bug de chrome pour plus d'informations (toujours pas clair si elle sera implémentée dans WebKit ou Chromium).


5
2018-03-05 06:09



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 du périphérique et, à l'aide de 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 à la hauteur de la fenêtre d'affichage et la hauteur du corps à la largeur de la fenêtre. Et mettons 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 corps et faites-le glisser (traduisez) en position.

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

5
2017-11-27 09:01



Peut-être dans un nouvel avenir ...

En mai 2015,

il existe une fonctionnalité expérimentale qui fait cela. Mais cela ne fonctionne que sur Firefox 18+, IE11 + et Chrome 38+.

Cependant, il 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");

3
2018-05-13 18:37



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 consiste donc à la verrouiller, ce qui ne peut être fait via le navigateur, ou à afficher une erreur / un message indiquant que l’application ne peut pas être utilisée tant que l’orientation n’est pas corrigée.


1
2018-05-16 17:54



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
2018-06-03 22:23