Mardi
17/08/10

CSS3 - Adapter une page html à l'aide des Media Queries [2] : device-width

Après width, qui permet de contrôler l'apparence de la page web en fonction de la largeur de la fenêtre du navigateur, voyons device-width qui concerne cette la fois la largeur de terminal.

Code CSS

body {
background-color:white;	
color:black;
}
 
@media only screen and (max-device-width:800px) {
 body {
 background-color:black;
 color:white
 }
}

Que va t-il se passer dans ce cas ?

Si vous êtes actuellement devant un écran d'ordinateur "normal", il y a peu de chances que cette propriété vous concerne. Contrairement à max-width, même en réduisant la fenêtre du navigateur à 800 pixels de large, rien ne se passera. Il faudrait descendre la résolution à 800*600, par exemple, pour que le fond de page soit noir.

Par contre, si vous utilisez un smartphone dont la taille de l'écran est 800 pixels de large en orientation paysage, le fond sera bien noir.

Tester le résultat

Jouons un peu...

Fixons maintenant la largeur maximum à 480 pixels (max-device-width:480px). Avec un smartphone dont la résolution de l'écran est de 480*800, quelle va être la couleur de fond ?

Faites vos jeux ! (Et on ne triche pas en faisant des tests ! Solution demain.)

Ma réponse sans tricher est "ça dépend…" Et je ne peux pas tester vu que je n'ai pas de tél. portable sourire

Bon, mais quand même, pour une fille qui fait également partie du club de "ceux qui n'ont pas de téléphone portable"... jouer avec le rendu CSS sur SmartPhone, c'est limite hein clin d'oeil

Emmanuel Clément - 17-08-2010 - 18:15

rire ! Mouarf !
Sauf que depuis, je suis passée du côté obscur avec un HTC Desire (les dimensions ne sont donc pas tout à fait prises au hasard).

Pascale - 17-08-2010 - 18:20

non mais qu'est-ce qu'il ne faut pas faire pour rester jeune ! clin d'oeil
J'ajoute à ma réponse "ça dépend..." que je pense que l'affichage va changer avec la bascule portrait/paysage de ton super-nouveau-téléphone-tout-neuf-méga-cool.

Emmanuel Clément - 17-08-2010 - 18:28

Je dis aussi : ça dépend.
Effectivement, je pense que ça dépend de l'orientation de cet excellent téléphone (j'ai le même - c'est donc tout à fait partial).

Cependant, je suis aussi persuadé que selon le navigateur (et indirectement l'appareil) le fond restera blanc bien souvent : prenons par exemple -au hasard- un téléphone sous windows mobile, dont le navigateur ne supporte probablement pas CSS3. Je ne suis pas non plus convaincu que tout ceci fonctionne sur les Blackberrys.

Martius - 17-08-2010 - 21:04

C'est clair, Martius, qu'avec IE comme navigateur, ça ne fonctionnera absolument pas puisqu'il ne reconnait pas du tout les media queries...

Pascale - 17-08-2010 - 21:17

ça dépend !

Nico - 17-08-2010 - 21:38

Oups, erreur de frappe : ça dépend, ça dépasse. sourire

Nico - 17-08-2010 - 21:38

Moi je dis que le Max-device-width de ton terminal est de 800px (et que sa valeur de viewport est encore différente mais ceci est un autre sujet) et que si tu n'indiques pas l'orientation dans ton média query, la page restera blanche.
Ou pas ?

Ps : les nouveaux BlackBerry (os6) reconnaissent les MQ clin d'oeil

Raphael - 17-08-2010 - 21:43

Ahhhh, merci de vos contributions les gars ! sourire

@Raph : le test là est sans viewport bien sûr, mais ça me donne une idée de test complémentaire tiens...

Pascale - 18-08-2010 - 10:55

Les commentaires des billets de l'année 2010 sont fermés.

| Avant | Archives | Haut de page |