Es posible evitar la transición a la vista horizontal en Safari para iOS cuando se gira el dispositivo?

iOS Safari tiene el «orentationchange de» evento», me trató de interceptarlo y deshabilitar el comportamiento predeterminado, como este:

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

pero al probar la página en mi iPhone, cuando me gire el dispositivo de la alerta se muestra, pero el interruptor de vista al paisaje. Parece que el evento.preventDefault() no se detiene la rotación.

Hay una manera de bloquear este comportamiento?

8 Comentarios

  1. 21

    No hay manera de forzar una orientación particular en Mobile Safari; que tendrá siempre rotación automática cuando el usuario gira el dispositivo.

    Tal vez usted puede mostrar algo para no compatible orientaciones para informar al usuario de que las orientaciones no son compatibles, y que necesitan para girar el dispositivo de nuevo en orden de uso de la aplicación web.

  2. 53

    Jonathan Snook tiene un trabajo en torno a este problema. En sus diapositivas aquí, muestra cómo (una especie de) bloqueo vertical (ver diapositiva 54 y 55).

    El código JS de las diapositivas:

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

    y el CSS:

    .orientleft #shell {
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin:160px 160px;
    }
    
    .orientright #shell {
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin:230px 230px;
    } 

    Traté de conseguir este trabajo para paisaje en el iPhone, pero nunca el 100% correcto. Llegué cerca con los siguientes jQueryian código, sin embargo. Esto sería dentro de la onready función. También nota: esto fue dentro de un «salvó a la pantalla de inicio de» contexto, y creo que la alteración de la posición de la de transformar de origen.

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

    Y el CSS:

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

    La esperanza de que ayude a alguien cerca de conseguir el resultado deseado…

    • intenta cambiar la transformación de los orígenes a 0,0?
    • Yo hasta votaron a favor de este, solo porque me hizo reír mucho. Genial!
    • Tuve esta idea, pero no estaba seguro de si había trabajo… me alegra saber que hace 😀 esto debe ser aceptado respuesta
    • este ans es todavía útil
    • Inteligente! Estas rocas!
  3. 5

    Mientras que usted no puede evitar el cambio de orientación de la toma de efecto puede emular ningún cambio como se indica en otras respuestas.

    Primera detección de la orientación del dispositivo o la reorientación y, usando JavaScript, agregar un nombre de clase a su elemento de ajuste (en este ejemplo yo uso la etiqueta 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();

    A continuación, si el dispositivo es el paisaje, el uso de CSS para establecer el ancho del cuerpo a la ventanilla de la altura y la altura del cuerpo para el ancho de ventana. Y vamos a configurar la transformación origen mientras estamos en ella.

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

    Ahora, reorientar el elemento del cuerpo y de la diapositiva (traducir) en la posición.

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

    Tal vez en un futuro nuevo…

    Como para Mayo de 2015,

    no es un experimento de la funcionalidad que hace que. Pero sólo funciona en Firefox 18+, IE11+ y Chrome 38+.

    Sin embargo, no funciona en Opera o Safari todavía.

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

    Aquí está el código actual para los navegadores compatibles:

    var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
    
    lockOrientation("landscape-primary");
  5. 1

    Creo que para nuestro caso donde tenemos que proporcionar una visión consistente de los datos que se muestran en la pantalla para los exámenes médicos, la rotación de la pantalla del dispositivo no se puede permitir. Realizamos el diseño de la aplicación para trabajar en el retrato. Así que la mejor solución para su uso es la de bloquear, que no puede ser hecho a través del navegador, o muestra un error/mensaje indicando que la aplicación no puede ser utilizado hasta que la orientación es fijo.

  6. 1

    La siguiente solución parece trabajando para mí en iPhone4, 5, 6 y 6+ a partir de junio de 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>
  7. -4

    Si es posible (que no creo que es), entonces me aconsejo en contra de ella. Los usuarios odian ser forzado en la visualización de las páginas de una manera particular. Lo que si están usando su iphone en un dock y no puede estar en modo de paisaje sin desacoplar de la misma, o si se prefiere la versión horizontal del teclado ya que las teclas son más grandes?

    Si el diseño requiere una orientación particular, entonces usted podría querer reconsiderar su diseño.

    • La webapp estoy construyendo es la orientación de los usuarios de a pie alrededor de la ciudad, así que tengo que pensar que el retrato de vista por defecto podría ser la forma más natural para vivir la experiencia. Voy a tener que pensar en diferentes escenarios, gracias por señalar esto a mí.
    • Si tu aplicación usa deviceorientation eventos por ejemplo, usted no desea rotación automática cuando el usuario mueve el dispositivo demasiado lejos en una dirección, para un juego que iba a conseguir super molesto.
    • estos tipos de comentarios son tan arrogante. la mayoría de los no-nerd de los usuarios sólo utilizan estos costumbre de ver » opciones porque la página web que están buscando ha horrible la usabilidad y el diseño o pequeña fuente, etc… simplemente indica que los usuarios quieren la flexibilidad no es muy útil. una etiqueta meta, además de para prevenir la auto-rotación de contenido muy justificada – apps pueden hacer…
    • Si desea que la cara del teléfono para ver como un objeto físico, como una tarjeta de juego, cambios de orientación son irrelevantes y de distracción. Para reafirmar lo anterior, Si el diseño requiere una orientación particular, usted podría haber tropezado a través de una novela de casos de uso, que pueden requerir diferentes de la tecnología a implementar.
    • Otro de fiar caso de uso que tenía era hacer un sitio de demostración que podría conseguir que se desecha, por lo que no quería para pasar el tiempo trabajando en un totalmente sensible sitio, pero queríamos que la demo buena impresión a nuestros clientes en sus iPhones. También, no es un gran fan de respuestas que dicen «no lo hagas», sin tratar de responder a la OP a la pregunta de cómo, y mostrar un poco de respeto a la OP.

Dejar respuesta

Please enter your comment!
Please enter your name here