Differences

This shows you the differences between two versions of the page.

--- 2016_2017:s1:webdoc:td6 [2016/12/05 15:33] – logre
+++ 2016_2017:s1:webdoc:td6 [2016/12/05 15:50] – [Syntaxe] logre
@@ Line 116: / Line 116: @@
       * projection : projecteur ;
       * 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>
@@ Line 125: / Line 125: @@
   * 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>