@media (max-width: 640px), pourquoi autant ?

Bonjour,

Je décortique avec joie la feuille de styles de base pour le Web mobile de Raphaël.

Question : pourquoi un @media (max-width: 640px) ? Je reconnais dans ce chiffre la largeur de la résolution de l'iPhone 4, dont je suppose qu'elle est la plus élevée existante sur un mobile et par conséquent prise comme référence maximale ici. Est-ce que je comprends ce qu'il faut comprendre ou bien y a-t-il une autre raison ? Pourquoi pas par exemple 480px puisque iPhone 3 et iPhone 4 ont la même largeur physique de 480px en paysage ? Ou alors est-ce lié aux autres smartphones ?

Bref, pourquoi autant ?

Si tu peux expliquer ce choix, Raphaël, merci. Ou si quelqu'un d'autre a une idée/explication.
Modifié par piffeo (06 Sep 2011 - 18:57)

Salut,

Attention ! ne pas confondre max-width et max-device-width. À noter que, quand tu utilises max-width, tu cibles également les écrans d'ordinateur classique.

piffeo a écrit :
Question : pourquoi un @media (max-width: 640px) ? Je reconnais dans ce chiffre la largeur de la résolution de l'iPhone 4

Bonjour,

En fait, il n'y a pas que l'iPhone dans la vie. D'autres smartphones récents ont une largeur supérieure à l'iPhone par exemple.

De plus, l'idée est de ne pas se focaliser dans l'idée "webmobile = smartphone".
Pour moi, un site a besoin de s'adapter à toutes les largeurs d'écran possibles et j'ai choisi les jalons suivants :
- plus de 1024px
- moins de 1024px
- moins de 640px

C'est un choix personnel, rien ne t'empêche d'opter pour d'autres valeurs

Merci pour les réponses.

@Raphaël : je sais qu'il n'y a pas que l'iPhone dans la vie (sauf la mienne), tu me l'as déjà dit . C'est juste que 640 px correspond exactement à la résolution de l'iPhone 4, donc je m'interrogeais. Je suis tout à fait d'accord sur la nécessité de s'adapter à toutes les largeurs possibles et toutes les plateformes possibles (faut pas croire, je suis un fanatique de l'interopérabilité et de l'ouverture, en vrai). Sur tes 3 jalons (que je crois voir à l'oeuvre sur ton site perso ou le site de l'agence), je trouve que c'est une bonne idée. C'est la même chose qu'on utilise sous Drupal avec le responsive HTML5 base theme "Omega".

Après je me demande juste si c'est bien utile de prendre du temps pour faire une CSS pour plus de 1024. Ça ne va guère jouer que sur le background. Car au final, du point de vue de l'UX design, le contenu doit toujours s'afficher dans une largeur restreinte. Exemple : 500px max de large pour une colonne de texte, dixit les typographes, sinon c'est la tendinite. Ça dépend du projet bien sûr. Mais bon, quand ça marche sur 1024, ça marche partout au-dessus, même si, je reconnais, c'est chouette de pouvoir occuper graphiquement tout l'espace de la fenêtre sur un grand écran type iMac (merde, y a pas que l'iMac dans la vie non plus, oui je sais). Et puis les gens sont beaucoup sur des laptop.

Mon idée est justement la suivante :
- webmobile = smartphone
- web standard = PC, laptop + tablettes (qui s'approchent voire se confondent avec les résolutions Desktop)

D'où quand même la division suivante :
- Desktop + laptop
- tablettes
- smartphones

Dans cette perspective, j'hésite, perso, avec les jalons suivants :
- jusqu'à 1024 et au-delà > i.e. 960 via la grid 960gs 12 colonnes de 60 px chacune (+ marges) = tous PC et Mac
- jusqu'à 768 > i.e. 720 via la grid 960gs 12 colonnes de 40 px de chacune (+ marges) = toutes tablettes égales ou supérieures à l'iPad (dans la vie, y a pas que... ok je sais). La tablette ACERIconia Tab A500 a une résolution de 1280x800. Idem pour la tablette ASUSEee Pad Transformer TF101. Mais la tablette ARCHOS9 PCtablet 32 Go est elle sur du 1024x600 = que faire ? Je suis tenté de prendre l'iPad comme référence.
- jusqu'à 640> largeur fluide = tous smartphones mobiles (iPhone à 640 ou 320, HTC à 540, etc.)

La question pour moi, c'est sur le 3ème jalon, pour les mobiles : peut-on s'entendre sur un max-width qui couvre tous les smartphones en se fondant sur la résolution la plus large connue pour un smartphone (640) ? Quelle est la résolution la plus large connue pour un smartphone, tu dis que ce n'est pas celle de l'iPhone 4 ?

Mais le problème se pose aussi sur le 2ème jalon : faut-il prendre un device comme référence (ici, l'iPad à 768) ou tenter de trouver le max-width qui va bien avec toutes les tablettes (800 ?) ?
Modifié par piffeo (07 Sep 2011 - 15:40)