orientation - rotacion - rotar pantalla iphone 6

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

Question

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.

Answer 1

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

Answer 2

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

Answer 3

Esta es una solución bastante hacky, pero al menos es algo (?). La idea es usar una transformación CSS para rotar los contenidos de su página al modo cuasi-retrato. Aquí está el código de JavaScript (expresado en jQuery) para que comiences:

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

El código espera que todo el contenido de su página viva dentro de un div justo dentro del elemento del cuerpo. Gira ese div 90 grados en modo paisaje - de vuelta a retrato.

Dejado como ejercicio para el lector: el div gira alrededor de su punto central, por lo que su posición probablemente tendrá que ajustarse a menos que sea perfectamente cuadrado.

Además, hay un problema visual poco atractivo. Cuando cambias la orientación, Safari gira lentamente, luego el div de nivel superior se ajusta a 90 grados diferentes. Para aún más diversión, agrega

body > div { -webkit-transition: all 1s ease-in-out; }

a tu CSS Cuando el dispositivo gira, Safari lo hace, y luego el contenido de la página. ¡Seductor!

Answer 4

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.

Answer 5

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

Answer 6

Inspirado por la respuesta de @Grumdrig, y debido a que algunas de las instrucciones utilizadas no funcionarían, sugiero el siguiente script si lo necesita alguien más:

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

Answer 7

Me gusta la idea de decirle al usuario que vuelva a poner su teléfono en modo vertical. Como se menciona aquí: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... pero utilizando CSS en lugar de JavaScript.

Answer 8

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

Answer 9

Se me ocurrió este método de solo CSS de girar la pantalla usando consultas de medios. Las consultas se basan en los tamaños de pantalla que encontré aquí . 480px parecía ser bueno ya que ninguno / pocos dispositivos tenían más de 480px de ancho o menos de 480px de alto.

@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
    }
}

Answer 10

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

Answer 11

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

Answer 12

Screen.lockOrientation() resuelve este problema, aunque el soporte es menos que universal en el momento (abril de 2017):

https://www.w3.org/TR/screen-orientation/

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

Answer 13

// 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.