2009-12-10 16 views
6

J'ai une page Web très basique qui utilise flot pour créer un graphique basé sur canvas (similaire à ce que SO utilise pour le graphique de réputation).Comment contrôler l'orientation de l'écran pour iPhone dans l'application Web

Dans le cas d'un écran PC, il devrait simplement sortir normalement, avec une largeur (axe x) de 1,6 fois la hauteur. Mais pour les iPhones, je voudrais que, plutôt que d'avoir un débordement en orientation "portrait", la page par défaut soit orientée paysage, encourageant (ou forçant) l'utilisateur à tourner son téléphone pour voir le tableau en tant qu'utilisateur PC aurait.

Mes questions sont les suivantes:

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) Y a-t-il un moyen, en général, de faire pivoter des éléments/objets, quel que soit celui qui les regarde? 3) Y a-t-il un moyen d'éviter le comportement par défaut de l'iPhone consistant à faire pivoter le contenu lors de la rotation de l'appareil? Évidemment, je veux que l'utilisateur fasse pivoter l'appareil en voyant qu'il est apparu sur le côté, mais je ne veux pas que le graphique se retourne et reste latéralement quand ils tournent le téléphone, les taquinant pour continuer à retourner le téléphone et ne jamais obtenir le graphique à tenir encore.

Merci!

Répondre

2

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; 
    } 
} 
+0

C'est sans aucun doute ce que je voulais esprit. Très élégant dans la mesure où il prend en compte à la fois l'utilisateur tournant l'appareil avec l'iPhone détectant le virage et sans. – Anthony

1

1/2) Avez-vous essayé -web-transform? Voir cette Apple web page

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

+0

+1 pour m'avoir indiqué une ressource vraiment géniale. – Anthony

0

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