So steuern Bildschirm-Ausrichtung für das iPhone in Web-App

Question

Ich habe eine sehr einfache Webseite, die flicht verwendet eine canvas basierte grafische Darstellung (ähnlich dem, was für den Ruf Graph SO verwendet) zu erstellen.

Im Fall eines PC-Display, es sollte einfach Ausgang normalerweise mit einer der Breite (x-Achse), die 1,6-fache der Höhe.

Aber für iPhones, würde ich es mögen, wenn, anstatt es Überlauf in „Portrait“ Ausrichtung, die Seite im Querformat vorbelegt, die Förderung (oder gezwungen), um den Benutzer sein Telefon, um das Diagramm als PC-Nutzer zu sehen, würde .

Also meine Fragen sind:

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

2) Gibt es eine Möglichkeit, in der Regel zu drehen Elemente / Objekte, unabhängig davon, wer sie sehen?

3) Gibt es eine Möglichkeit das iPhone Standardverhalten des Drehens des Inhalts zu vermeiden, wenn das Gerät gedreht wird? Offensichtlich mag ich den Benutzer auf das Gerät dreht nach dem Sehen, dass es seitlich aufgetaucht ist, aber ich will nicht die Kurve über kippen und STILL seitlich sein, wenn sie das Telefon einschalten, sie necken, um das Telefon weiter zu drehen und nie bekommen der graph noch zu halten.

Danke!

Answer 1

So etwas wie dies.

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-Webseite

3) Ich denke, man kann nicht die automatische Drehung hemmen

Answer 3

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