1486 sujets

Web Mobile et responsive web design

Mobile et optimisation CSS

Salut,

Tous les articles que je trouve à propos d'daptation des CSS aux téléphones mobiles parlent de feuilles de styles corrigeant une feuille principale pour l'adapter aux mobiles.
Or, je souhaite utiliser un fichier unique, différent du fichier principal, pour les mobiles, afin d'éviter notamment de charger des images de fond inutiles.
J'ai bien essayé vomme ceci
<meta name="viewport" content="width=device-width, maximum-scale=1" />
<link media="screen and (min-width: 481px), screen and (min-device-width: 481px)" rel="stylesheet" type="text/css" href="css/global.css" />
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="css/handheld.css" />

mais protofluid m'interprète quand même ma feuille de style principale (et la charge, et charge donc les images de fond indiquées, ce que je ne souhaite pas).

Un chtit coup de main svp. Smiley smile
Normalement, si les images dans la feuille de style ne sont pas utiles pour le «query», elles ne sont pas chargées. Smiley cligne

Tu devrais faire tes tests sur un vrai navigateur* et pas sur un site qui émule. Smiley smile


*Firefox mobile, opera mini, etc, sont dispo en version desktop. Smiley cligne
Modifié par Patidou (08 Oct 2010 - 10:30)
Mon problème, c'est précisément que si je mets tout dans un même fichier avec un @media, la première partie ne sera distingué par aucun media query particulier, et entraînerait donc un chargement des images de fond par les portables, ce que je ne veux pas.
Patidou a écrit :
*Firefox mobile, opera mini, etc, sont dispo en version desktop. Smiley cligne

Petite précision : c'est Opera Mobile qui est disponible en version desktop, Opera Mini ne pouvant être émulé qu'en ligne sur le site d'Opera. Smiley cligne

Pour revenir au sujet, il est inutile d'utiliser les media queries pour la feuille de style global.css : screen tout court suffit, auquel cas la seconde feuille de style comportera des correctifs (comme background-image: none).
Modifié par Victor BRITO (08 Oct 2010 - 12:50)
Ben oui, justement, c'est là mon problème : si on fait comme ça, le navigateur ne va-t-il pas commencer par interpréter la première feuille de style (auquel cas il téléchargerait déjà certaines images de fond), avant de tomber sur la 2ème feuille de style qui lui dit "non c'est bon, celles-là oublie les" ?
Ou va-t-il, comme tu sembles l'indiquer, se comporter intelligemment, charger les 2 feuilles de style, faire la synthèse, et après seulement déclencher les chargements d'images ?
Je suppose que le navigateur charge d'abord le fichier html, les css et décide d'afficher/charger les images suivant les conditions.

Dans ton cas, il suffit de rétrécir la fenêtre de ton navigateur en dessous de 480 pixels et de regarder avec firebug (onglet réseau) si le chargement des images se fait. Smiley cligne
Modifié par Patidou (08 Oct 2010 - 13:12)
Bon ben apparemment, c'est pas très évident d'avoir un résultat fiable à ce sujet, va falloir fouiller la question en triturant les logs serveur.
Je vous dirai ce que ça donne.

Merci
Bonjour,

Je me permets de me greffer à ce sujet, car j'aimerais également créer un CSS spécialement pour les mobile iphone, etc...

Si je comprends bien, il faut ajouter un <lin> pour une feuille de style de style spécifique. Mais ce que je ne comprends pas, c'est s'il va chargé ou non les autres CSS?
pika28 a écrit :
Je me permets de me greffer à ce sujet, car j'aimerais également créer un CSS spécialement pour les mobile iphone, etc...

Tu aurais pu ouvrir un nouveau sujet ou effectuer une recherche. Smiley cligne
pika28 a écrit :
Si je comprends bien, il faut ajouter un &lt;lin&gt; pour une feuille de style de style spécifique. Mais ce que je ne comprends pas, c'est s'il va chargé ou non les autres CSS?

En effet, il faut appeler une feuille de style ciblant les média mobiles (handheld + media queries), comme suit :
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld, only screen and (max-device-width: 640px)" />

S'il y a d'autres fichiers CSS ciblant le média screen, ils seront chargés. Par conséquent, celui ciblant les mobiles ser aun correctif.

Cela dit, tu n'es pas obligé de créer un fichier CSS supplémentaire : tu cibler différents médias dans un seul fichier CSS, grâce à la règle @media de CSS :
/* Règles CSS pour écrans d'ordinateur */
@media handheld, only screen and (max-device-width: 640px) {
  /* Règles CSS pour les mobiles */
}
Sujet clos
Aller à