Wie control-Bildschirm-Orientierung für das iPhone in die web app

Ich habe eine sehr einfache Webseite, die verwendet flot zu erstellen canvas basierte Grafik (ähnlich zu dem, was SO verwendet wird für die Ruf-Diagramm).

Im Fall von einem PC-display, es soll einfach die Ausgabe, die normalerweise mit der Breite (x-Achse), die 1.6 mal die Höhe.

Aber für iPhones, ich würde es gerne, wenn, anstatt es überlauf in "portrait" Orientierung, wird die Seite standardmäßig auf Querformat, fördern (oder zu erzwingen) die Benutzer, die Ihr Handy zu sehen, das Diagramm als PC-Nutzer würde.

Also meine Fragen sind:

1) gibt es eine Möglichkeit (mit CSS, JS, oder einfach HTML-head-tags") für die Leinwand um 90 Grad drehen, die auf die Erkennung einer portrait-Orientierung?

2) gibt es eine Möglichkeit, im Allgemeinen, drehen, Elemente/Objekte, unabhängig davon, wer es anschauen?

3) gibt es eine Möglichkeit zu vermeiden, das iPhone ist Standard-Verhalten von rotierenden Inhalten, wenn das Gerät gedreht wird? Natürlich möchte ich dem Benutzer, drehen Sie das Gerät nach dem sehen, dass es oben gezeigt hat seitlich, aber ich möchte nicht, das Diagramm zu drehen und immer NOCH seitwärts, wenn Sie das Telefon einschalten, necken Sie weiterhin klappen Sie das Telefon und nie bekommen die Kurve halt noch.

Dank!

InformationsquelleAutor Anthony | 2009-12-10
  1. 2

    Etwas wie dieses.

    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;
  }
}
    • Dies ist definitiv das, was ich im Sinn hatte. Sehr elegant, dass es berücksichtigt sowohl die Benutzer, drehen Sie das Gerät mit dem iPhone erfassen der Drehung und ohne.
    InformationsquelleAutor Robert Cabri
  2. 1

    1/2) Haben Sie versucht, die -web-transform? Sehen Sie diese Apple-web-Seite

    3) ich denke, man kann Sie nicht hemmen, die auto-rotation

    • +1 für den Hinweis mich zu einem wirklich großartigen Ressourcen.
    InformationsquelleAutor muccy
  3. 0

    Eine andere Möglichkeit ist, richten Sie Ihre CSS-Datei mit dem folgenden code:

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

/* Landscape */
@media screen and (min-width: 321px){
    /* Place your style definitions here */
}
    InformationsquelleAutor Koen.
Schreibe einen Kommentar