So steuern Sie die Bildschirmausrichtung für das iPhone in der Webanwendung

Question

Ich habe eine sehr einfache Webseite, die flot verwendet, um ein canvas basiertes Diagramm zu erstellen (ähnlich dem, was SO für das Reputationsdiagramm verwendet).

Im Falle eines PC-Displays sollte es einfach normal ausgeben, mit einer Breite (x-Achse) von 1,6 mal der Höhe.

Aber für iPhones würde ich es mögen, wenn die Seite nicht in der Hochformat-Ausrichtung überläuft, wird die Seite in Querformat ausgerichtet, was den Benutzer ermutigt (oder zwingt), sein Telefon zu drehen, um das Diagramm als PC-Benutzer zu sehen würde.

Also meine Fragen sind:

1) Gibt es eine Möglichkeit (unter Verwendung von CSS, JS oder HTML einfach Kopf-Tags), um die Leinwand zu haben, 90 Grad bei Erfassung eines Hochformat drehen?

2) Gibt es generell eine Möglichkeit, Elemente/Objekte zu rotieren, unabhängig davon, wer sie gerade betrachtet?

3) Gibt es eine Möglichkeit, das Standardverhalten des iPhone beim Drehen des Inhalts zu vermeiden, wenn das Gerät gedreht wird? Offensichtlich möchte ich, dass der Benutzer das Gerät dreht, wenn er sieht, dass es seitwärts gezeigt wird, aber ich möchte nicht, dass das Diagramm umkippt und immer noch seitwärts ist, wenn es das Telefon dreht, um es weiter zu drehen das Diagramm, um still zu halten.

Danke!

Answer 1

So etwas wie das.

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) Haben Sie versucht -web-transform? Sehen Sie diese Apple web page

3) Ich denke, dass Sie nicht die Autorotation

Answer 3

hemmen kann

Eine andere Option ist, Ihre CSS mit dem folgenden Code zum Ziel:

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

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