orientation - rotar - ¿Cómo bloqueo la orientación al modo vertical en una aplicación web iPhone?




rotar pantalla iphone 7 (9)

Estoy construyendo una aplicación web para iPhone y quiero bloquear la orientación en modo retrato. ¿es posible? ¿Hay alguna extensión de kit web para hacer esto?

Tenga en cuenta que esta es una aplicación escrita en HTML y JavaScript para Mobile Safari, NO es una aplicación nativa escrita en Objective-C.


El siguiente código fue utilizado en nuestro juego 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'); 
});

En el café si alguien lo necesita.

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

Esta respuesta aún no es posible, pero la estoy publicando para "futuras generaciones". Con suerte, algún día podremos hacerlo a través de la regla @viewport de CSS:

@viewport {
    orientation: portrait;
}

Spec (en proceso):
https://drafts.csswg.org/css-device-adapt/#orientation-desc

MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation

Basado en la tabla de compatibilidad del navegador MDN y el siguiente artículo, parece que hay algo de soporte en ciertas versiones de IE y Opera:
http://menacingcloud.com/?c=cssViewportOrMetaTag

Esta especificación API de JS también se ve relevante:
https://w3c.github.io/screen-orientation/

Había asumido que debido a que era posible con la regla @viewport propuesta, sería posible establecer la orientation en la configuración de la ventana gráfica en una meta , pero no he tenido éxito hasta el momento.

Siéntase libre de actualizar esta respuesta a medida que mejoran las cosas.


Haga clic here para obtener un tutorial y un ejemplo de trabajo de mi sitio web.

Ya no es necesario usar hacks solo para mirar Orientación de pantalla de jQuery Mobile ni tampoco debes usar PhoneGap, a menos que estés usando PhoneGap.

Para que esto funcione en el año 2015, necesitamos:

  • Cordova (cualquier versión aunque algo por encima de 4.0 es mejor)
  • PhoneGap (incluso puedes usar PhoneGap, los complementos son compatibles)

Y uno de estos complementos depende de tu versión de Cordova:

  • net.yoik.cordova.plugins.screenorientation (Cordova <4)

complemento cordova agregar net.yoik.cordova.plugins.screenorientation

  • complemento cordova agregar cordova-plugin-screen-orientation (Cordova> = 4)

plugin cordova agregar cordova-plugin-screen-orientation

Y para bloquear la orientación de la pantalla simplemente use esta función:

screen.lockOrientation('landscape');

Para desbloquearlo:

screen.unlockOrientation();

Posibles orientaciones:

  • portrait-primary La orientación está en el modo de retrato primario.

  • portrait-secondary La orientación está en el modo de retrato secundario.

  • landscape-primary La orientación está en el modo primario de paisaje.

  • landscape-secondary La orientación está en el modo de paisaje secundario.

  • retrato La orientación es vertical o vertical secundaria (sensor).

  • paisaje La orientación es landscape-primary o landscape-secondary (sensor).



Puede especificar estilos CSS según la orientación de la ventana gráfica: oriente el navegador con el cuerpo [orient = "landscape"] o body [orient = "portrait"]

http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

Sin embargo...

El enfoque de Apple para este problema es permitirle al desarrollador cambiar el CSS en función del cambio de orientación, pero no para evitar la reorientación por completo. Encontré una pregunta similar en otro lado:

http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari


Si bien no puede evitar que el cambio de orientación surta efecto, no puede emular ningún cambio como se indica en otras respuestas.

Primero detecte la orientación o reorientación del dispositivo y, usando JavaScript, agregue un nombre de clase a su elemento de ajuste (en este ejemplo, uso la etiqueta de cuerpo).

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

Luego, si el dispositivo es horizontal, use CSS para establecer el ancho del cuerpo a la altura de la vista y la altura del cuerpo al ancho de la ventana gráfica. Y establezcamos el origen de la transformación mientras estamos en ello.

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

Ahora, reoriente el elemento del cuerpo y deslícelo (tradúzcalo) a su posición.

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

Tal vez en un nuevo futuro tendrá una soludición fuera de la caja ...

En cuanto a mayo de 2015,

hay una funcionalidad experimental que hace eso.

Pero solo funciona en Firefox 18+, IE11 + y Chrome 38+.

Sin embargo, aún no funciona en Opera o Safari.

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

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

Esto, o una solución CSS similar, al menos preservará su diseño si eso es lo que está buscando.

La solución raíz es la contabilidad de las capacidades del dispositivo en lugar de intentar limitarlas. Si el dispositivo no te permite la limitación adecuada, un simple truco es tu mejor opción, ya que el diseño es esencialmente incompleto. Cuanto más simple, mejor.