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:33] logre |
2016_2017:s1:webdoc:td6 [2016/12/05 16:54] logre [Les navigateurs mobiles] |
||
---|---|---|---|
Line 116: | Line 116: | ||
* projection : projecteur ; | * projection : projecteur ; | ||
* 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> | <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> | ||
Line 126: | Line 126: | ||
</box> | </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> | ||
+ | |||
+ | |||
+ | ===== 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> | ||