Utiliser les MQ pour cibler les fixes au lieu des mobiles

Bonjour,

C'est en répondant au sujet de pika28 que m'est venue cette réflexion. On cherche toujours à utiliser les MQ pour cibler les mobiles, or actuellement cette technique pose à mon sens deux problèmes majeurs :
- La compatibilité n'est pas totale (voir ce tableau),
- Le poids des pages n'est pas optimisé (les styles pour les fixes sont chargés avant les correctifs, enfin je suppose qu'ils sont au moins "lus").

Les medias queries étant supportés par tous les navigateurs fixes actuels, pourquoi ne pas les utiliser là où ils ne posent pas de problème ?

Je pense à quelque chose comme ça :

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=0"/>
<link media="screen and (min-device-width:[i]800px[/i])" rel="stylesheet" href="fixe.css"/>
<link media="all and (max-device-width:[i]800px[/i])" rel="stylesheet" href="mobile.css"/>

<!-- On peut également envisager d'utiliser une CSS commune : -->
<link media="all" rel="stylesheet" href="all.css"/>

Et rien n'empêche d'utiliser les MQ dans la CSS mobile pour transcender l'affichage sur certains smartphones :

/***** mobiles. css *****/
...

@media only screen and (max-device-width:480px) {
... }

Qu'en pensez-vous ? (ne me parlez pas de l'iPad)

Bon dimanche tout le monde.
Modifié par BeliG (28 Nov 2010 - 12:11)

AMHA ce tableau ne veut pas dire grand chose en pratique : si j'avais un blacberry ou un smartphone avec windows phone OS, je me dépêcherais d'installer Opera. Je ne suis pas fou.

Perso, sur mon site, j'ai tout regroupé dans un seul fichier css (all, print, mobile). Le fichier est certes un peu plus gros mais il n'y a qu'une requête HTTP.

@media handheld, only screen and (max-device-width:500px), only screen and (max-width:500px), only screen and (-webkit-min-device-pixel-ratio: 2) 
{ 
… 
}

Avec ce code je gère les anciennes versions de navigateurs (handheld), les desktop/mobile en moins de 500px et iphone 4/ipod 4.
Modifié par Patidou (28 Nov 2010 - 15:02)

Liens :

* Creating a mobile web site
* Penser mobile d’abord par Luke Wroblewski
* Penser mobile d’abord aide pour les décisions critiques

Patidou a écrit :
Avec ce code je gère les anciennes versions de navigateurs (handheld)

En es-tu sûr ?

Comme on peut le constater dans les retours donnés sur ce sujet, l'implémentation de @media handheld laisse fortement à désirer sur les smartphones non orientés "websurfing" (j'ai pas trouvé mieux pour désigner les mobiles qui ne sont pas initialement prévus pour surfer).

Je pense aussi qu'il faut arrêter de croire que tout le monde télécharge un autre navigateur que celui qui est installé par défaut. C'est peut-être vrai pour les gens du milieu ou les initiés avec forfait Internet illimité, mais les autres pour la plupart doivent même ignorer que des browsers alternatifs sont disponibles (ce qui ne les empêche pas d'être mobinaute à l'occasion, pour "dépanner").

Sinon déjà lu tes liens, et je ne vois en pas en quoi ils apportent quelque chose à ma problématique de base.

Le media "handheld" est déjà très ancien et supporté par les versions précédentes de Opera Mobile/Mini, je le garde donc.

Je te confirme aussi (j'ai plus les liens) que Opera est le navigateur le plus utilisé sur GSM non-smartphone et sur Windows Mobile 6 (7 je ne sais pas).

Pour ton code il faudrait tester si le navigateur charge quand mêmes les css même si elles ne correspondent pas au query, pareil pour les images.

Dans tous les cas (un fichier css ou plusieurs), pour moi, c'est mieux des styles communs et les adaptations pour "print", mobile, etc.

Patidou a écrit :
Le media handheld est déjà très ancien et supporté par les versions précédentes de Opera Mobile/Mini, je le garde donc.

J'allais te dire :

"Attention mon cher Patidou ! Il n'est supporté sur Opéra Mobile / Mini que si l'option Affichage mobile est activée."

Mais après quelques recherches, il semblerait (en tout cas pour les versions d'Opéra Mini > 5 et Opéra Mobile > 10) que lorsque l'option est désactivée, le mobile prend en compte les media queries (il ne les prend pas en compte quand l'option est activée, mais dans les 2 cas la condition dans ton code sera tout de même validée).

Patidou a écrit :
Je te confirme aussi (j'ai plus les liens) que Opera est le navigateur le plus utilisé sur GSM non-smartphone et sur Windows Mobile 6 (7 je ne sais pas).

Sur les non-smartphones peut-être, mais sur des smartphones comme l'Acer Liquid, l'HTC Touch ou le Blackberry (qui ne reconnaissent ni les media queries, ni le media handheld), tu crois qu'avec un téléphone aussi récent et high-tech les utilisateurs ont la démarche naturelle de changer de navigateur ?

Patidou a écrit :
Pour ton code il faudrait tester si le navigateur charge quand mêmes les css même si elles ne correspondent pas au query, pareil pour les images.

Pourquoi il les chargerait si la requête ne correspond pas ?

Patidou a écrit :
Dans tous les cas (un fichier css ou plusieurs), pour moi, c'est mieux des styles communs et les adaptations pour "print", mobile, etc.

Je paye l'Internet mobile au kilo-octet, ça m'arrangerait de ne payer que ce qui me concerne (et donc de ne pas payer le poids des CSS destinés aux fixes, aux imprimantes, etc.).
Modifié par BeliG (28 Nov 2010 - 19:06)

Il y a un petit malentendu, je parlais bien de la version précédente de Opera pas l'actuelle pour le média handheld.

Pour ce qui est de la css, sur Safari Mobile les fichiers pesant moins de 25ko sont dans le cache du navigateur. Je préfère «payer» quelques ko en plus mais avoir un chargement rapide.