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

Question

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

En el caso de una pantalla de PC, simplemente debería salir normalmente, con un ancho (eje x) de 1,6 veces la altura.

Pero para iPhones, me gustaría que, en lugar de desbordarse en orientación "vertical", la página adoptara la orientación horizontal, alentando (u obligando) al usuario a encender su teléfono para ver el gráfico cuando 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 forma, en general, de rotar elementos/objetos, independientemente de quién lo esté viendo?

3) ¿Hay alguna manera de evitar el comportamiento predeterminado del iPhone al girar el contenido cuando se gira el dispositivo? Obviamente, quiero que el usuario gire el dispositivo al ver que se ha mostrado hacia los lados, pero no quiero que el gráfico se voltee y TODAVÍA esté hacia los lados cuando enciende el teléfono, provocando que continúen volteando el teléfono y nunca obtengan el gráfico para mantener quieto.

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) ¿Has probado -web-transform? Ver este Apple web page

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 */ 
}