Come controllare screen-orientamento per iPhone a web app

Question

Ho una pagina web molto semplice che utilizza flot per creare un grafico basato canvas (simile a quello che utilizza SO grafico reputazione).

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

Ma per iPhone, mi piacerebbe se, invece di averlo overflow "ritratto" l'orientamento, la pagina default per orientamento orizzontale, favorendo (o forzare) l'utente a trasformare il loro telefono per vedere il grafico come utenti pc .

Quindi le mie domande sono le seguenti:

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

2) C'è un modo, in generale, per ruotare gli elementi / oggetti, indipendentemente da chi è la visualizzazione di esso?

3) C'è un modo per evitare il comportamento predefinito del iPhone di ruotare il contenuto quando viene ruotato il dispositivo? Ovviamente voglio all'utente di ruotare il dispositivo dopo aver visto che si è presentato di lato, ma non voglio che il grafico a capovolgere e di essere ancora di traverso quando si rivolgono al telefono, prendere in giro loro di continuare a capovolgere il telefono e mai ottenere il grafico di tenere ancora.

Grazie!

Answer 1

Qualcosa di simile a questo.

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 di Apple pagina web

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