Comment contrôler l'écran d'orientation pour iPhone dans l'application web

Question

J'ai une page web très basique qui utilise Flot pour créer un graphique à base de canvas (semblable à ce que pour le graphique utilise des réputation).

Dans le cas d'un écran d'ordinateur, il convient simplement d'anomalie, avec une largeur (axe x) étant 1,6 fois la hauteur.

Mais pour les iPhones, je voudrais si, au lieu d'avoir déborder dans l'orientation « portrait », la page par défaut à l'orientation du paysage, encourageant (ou de forcer) à l'utilisateur de transformer leur téléphone pour voir le tableau que les utilisateurs de PC serait .

Alors mes questions sont:

1) Est-il possible (en utilisant le CSS, JS, ou simplement balises head HTML) pour avoir la toile pivoter de 90 degrés sur la détection d'une orientation portrait?

2) Est-il possible, en général, de faire tourner les éléments / objets, peu importe qui est le visionner?

3) Y at-il un moyen d'éviter le comportement par défaut de l'iPhone de rotation du contenu lorsque le dispositif est mis en rotation? Évidemment, je veux que l'utilisateur de faire tourner le dispositif en voyant qu'il a montré jusqu'à côté, mais je ne veux pas le graphique pour retourner et encore être sur le côté quand ils tournent le téléphone, les taquineries de continuer à retourner le téléphone et de ne jamais le graphique pour tenir encore.

Merci!

Answer 1

Quelque chose comme ça.

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) Avez-vous essayé -web-transform? Voir cette d'Apple page Web

3) Je pense que vous ne pouvez pas empêcher la rotation automatique

Answer 3

Une autre option est de cibler votre CSS avec le code suivant:

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

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