CSS3: Détection de l'orientation de l'appareil pour l'iPhone

Question

Cette déclaration fonctionne donc bien pour iOS 4 et 4.1, mais pas pour les anciennes versions. Aucun conseil?

@media screen and (device-width:320px) and (orientation:portrait) { 
    /* iPhone Portrait Styles Here*/ 
} 

@media screen and (device-width:320px) and (orientation:landscape) { 
    /* iPhone Landscape Styles Here*/ 
} 

Answer 1

nous utilisons javascript pour ce faire, d'une manière similaire à ceci:

Can js/jQuery determine the orientation of the iPhone?

Answer 2

Oui. Selon le MDN docs:

orientation

Valeur: paysage | portrait

Médias: visuel

Accepte les préfixes min/max: pas

Indique si la fenêtre est dans le paysage (l'écran est plus large que haut) ou portrait (le l'affichage est plus grand que large) Mode .

Exemple

Pour appliquer une feuille de style uniquement en orientation portrait:

@media all and (orientation: portrait) { ... }

Note: Cette valeur ne correspond pas à l'orientation réelle de l'appareil. Si vous ouvrez le clavier virtuel sur la plupart des périphériques en orientation portrait, la fenêtre sera agrandie à et le navigateur utilisera styles de paysage au lieu de portrait.