Come controllare l'orientamento dello schermo per iPhone nell'app Web

Question

Ho una pagina Web molto semplice che utilizza flot per creare un grafico basato su canvas (simile a ciò che SO utilizza per il grafico della reputazione).

Nel caso di un display PC, dovrebbe semplicemente essere emesso normalmente, con una larghezza (asse x) pari a 1,6 volte l'altezza.

Ma per gli iPhone, mi piacerebbe che, anziché avere un overflow in orientamento "verticale", la pagina fosse impostata come predefinita in orientamento orizzontale, incoraggiando (o forzando) l'utente a ruotare il telefono per vedere il grafico come utenti PC voluto.

Quindi le mie domande sono:

1) C'è un modo (usando i CSS, JS, o semplicemente tag head HTML) per avere la tela ruotare di 90 gradi su rilevamento di un orientamento verticale?

2) C'è un modo, in generale, di ruotare elementi/oggetti, indipendentemente da chi lo sta visualizzando?

3) Esiste un modo per evitare il comportamento predefinito di iPhone di ruotare il contenuto quando il dispositivo viene ruotato? Ovviamente voglio che l'utente ruoti il ​​dispositivo dopo aver visto che è apparso di lato, ma non voglio che il grafico si capovolga e STILL sia di lato quando accendono il telefono, stuzzicandoli per continuare a capovolgere il telefono e non ottenere mai il grafico da tenere fermo.

Grazie!

Answer 1

Qualcosa di simile.

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) Hai provato -web-transform? Vedere questo Apple web page

3) Penso che non è possibile inibire l'auto-rotazione

Answer 3

Un'altra opzione è quella di indirizzare il tuo CSS con il seguente codice:

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

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