Conception adaptative pour iPad et iOS

Question

Nouveau design pour les appareils mobiles. Comment puis-je m'assurer, en particulier pour iOS, que le navigateur utilise réellement les requêtes de médias CSS que j'ai intégrées et non simplement redimensionner la page? Par exemple, j'essaie de définir une requête média afin que je puisse avoir différentes dispositions en mode portrait et paysage sur l'iPad, mais il semble que Safari soit simplement en train de redimensionner ou de zoomer plutôt que de charger la requête média .

Tous les liens, tutoriels seraient également très appréciés!

Answer 1

Un seul lien suffit!

http://bricss.net/post/22198838298/easily-checking-in-javascript-if-a-css-media-query-has

JS vient à votre secours en sautant des alertes lorsque chaque feu de la requête des médias. Vous devriez connaître certains JS pour que ces alertes se produisent ...

Answer 2

Nous devons cibler des solutions médiatiques particulières pour gérer cette situation. Je vous suggère de lire this article.

Answer 3

J'utilise ces requêtes des médias pour faire iPad CSS spécifique

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation:landscape) 
{ 
    /* iPad landscape style here */ 
} 
@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation:portrait) 
{ 
    /* iPad portrait style here */ 
} 

Et semblables pour iPhone avec des valeurs différentes.

S'il est difficile de tester sur un périphérique réel, vous pouvez vérifier la conception dans le simulateur iOS (si vous êtes sur un Mac avec les outils de développement iOS installés). Vous pouvez même utiliser l'inspecteur Web dans Safari pour inspecter le code HTML, CSS, JavaScript dans le simulateur.