¿Cómo controlar la orientación de la pantalla para el iPhone en la aplicación web

Question

Tengo una página web muy básica que utiliza flot para crear un gráfico basado canvas (similar a la que utiliza SO para el gráfico de la reputación).

En el caso de una pantalla de PC, se debe simplemente sale normalmente, con una la anchura (eje x) que es 1,6 veces la altura.

Sin embargo, para los iPhones, me gustaría que, en lugar de tener que desborde en "retrato" de orientación, la página por defecto en orientación horizontal, alentando (o forzar) al usuario convertir su teléfono para ver el gráfico como los usuarios de PC haría .

Así que mis preguntas son:

1) ¿Hay alguna manera (usando CSS, JS, o simplemente etiquetas de la cabeza HTML) para tener el lienzo girar 90 grados en la detección de una orientación vertical?

2) ¿Hay alguna manera, en general, para girar los elementos / objetos, independientemente de quién está viendo él?

3) ¿Hay una manera de evitar el comportamiento predeterminado del iPhone de rotar el contenido cuando se gira el dispositivo? Obviamente quiero que el usuario haga girar el dispositivo al ver que se ha presentado hacia los lados, pero no quiero que la gráfica se volcara y aún así estar de lado cuando se enciende el teléfono, jugando con ellos para continuar girando el teléfono y nunca conseguir el gráfico que permanezca inmóvil.

Gracias!

Answer 1

Algo como esto.

window.onorientationchange = function() {

  var orientation = window.orientation;
  switch(orientation) {
    case 0:

    document.body.setAttribute("class","portrait");

    break; 

    case 90:

    document.body.setAttribute("class","landscapeLeft");

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
    break;

    case -90: 

    document.body.setAttribute("class","landscapeRight");

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
    break;
  }
}

Answer 2

1/2) ¿Usted intentó -web-transform? Ver este de Apple página Web

3) Creo que no se puede inhibir la rotación automática

Answer 3

Otra opción es dirigirse a su CSS con el siguiente código:

/* Portrait */
@media screen and (max-width: 320px){
    /* Place your style definitions here */
}

/* Landscape */
@media screen and (min-width: 321px){
    /* Place your style definitions here */
}