This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
2016_2017:s1:webdoc:td6 [2016/12/05 16:30] logre [Syntaxe] |
2016_2017:s1:webdoc:td6 [2016/12/05 17:01] logre [Les navigateurs mobiles] |
||
---|---|---|---|
Line 117: | Line 117: | ||
* all : tous les types d'écran. | * all : tous les types d'écran. | ||
+ | <note tip>On peut rajouter le préfixe min- ou max- devant la plupart de ces règles. Ainsi, min-width signifie « Largeur minimale », max-height « Hauteur maximale », etc.</note> | ||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | Ecrire les //media queries// et les règles CSS permettant de cibler : | ||
+ | * les écrans, quand la largeur de la fenêtre fait au maximum 1280px, pour mettre le fond en noir. | ||
+ | * tous types de supports, quand la largeur de la fenêtre est comprise entre 1024px et 1280px, pour mettre le texte en rouge. | ||
+ | * tous types d'écrans orientés verticalement, pour mettre les titres en gras. | ||
+ | </box> | ||
+ | ===== Les navigateurs mobiles ===== | ||
+ | |||
+ | Afin d'optimiser l'affichage sur les plus petits écrans, les navigateurs mobiles utilisent un affichage dézoomé qui simule une meilleure résolution. | ||
+ | Cela s'appelle le **viewport**. | ||
+ | Une //media query// qui cible le support mobile avec un ''max-width'' sur un mobile va donc utiliser la longueur du viewport. | ||
+ | Or, celle-ci est inhérente au navigateur lui-même ! Puisque chacun implémente cette simulation par zoom à sa façon. | ||
+ | |||
+ | Quelques exemples : | ||
+ | * **Opera Mobile** 850 pixels | ||
+ | * **iPhone Safari** 980 pixels | ||
+ | * **Android** 800 pixels | ||
+ | * **Windows Phone** 1024 pixels | ||
+ | |||
+ | Ainsi, un Android se comporte comme si la fenêtre faisait 800px de large, tandis que l'utilisateur de Windows phone voit son CSS considérer qu'il en a 1024! | ||
+ | |||
+ | Simple palliatif : ''max-device-width'' qui demande la largeur du périphérique (du support) et non du navigateur (le logiciel). | ||
+ | |||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | * Ecrire la //media query// et les règles CSS permettant d'afficher tous les liens en vert sur mobile et testez. | ||
+ | * Mettez en évidence la différence de viewport avec un même code exécuté sur Android et sur iPhone (ou windows phone si vous en trouvez un) | ||
+ | * Théoriquement, quelle autre media query devrait nous éviter ce problème ? Pourquoi ne fonctionne-t-elle pas ? | ||
+ | </box> | ||
+ | |||
+ | |||
+ | ===== Et en pratique ? ===== | ||
+ | |||
+ | Une bonne idée est de limiter les menus latéraux sur les petits écrans verticaux voir d'éliminer les menus qui défilent avec le scroll. | ||
+ | Cela nécessite de restructurer sa page. | ||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | * Concevez ou reprenez une page web disposant d'un menu visible à tout instant et d'une colonne à gauche et à droite présentant respectivement le menu de la page et les partenaires du site. | ||
+ | * Ecrivez le CSS nécessaire à l'adaptation de cette pas à une navigation sur mobile. Testez. | ||
+ | * Quels changements proposez-vous pour une adaptation vers un écran géant 40" ? Implémentez-les dans votre CSS. | ||
+ | </box> | ||
+ | |||
+ | |||
+ | |||
+ | ===== Je dois savoir ===== | ||
+ | |||
+ | <box round rgb(255,150,103) 97%|Je dois savoir : > | ||
+ | * Les media queries permettent d'appliquer différents styles CSS en fonction de certaines conditions. | ||
+ | * Il existe de nombreux paramètres booléens à disposition : nombre de couleurs, résolution de l'écran, orientation... | ||
+ | * On utilise a directive @media d'une ou plusieurs conditions, le style CSS qui suit sera appliqué si elles sont remplies. | ||
+ | * Les navigateurs mobiles simulent une largeur d'écran : on appelle cela le viewport. | ||
+ | * On peut cibler les smartphones grâce à une règle basée sur le nombre réel de pixels affichés à l'écran : ''max-device-width''. | ||
+ | </box> | ||