Détecter le device pour charger la feuille de style correspondante

Bonjour,

Je suis novice en matière de web responsive et je suis confronté aux problèmes suivants pour la création d'un site internet devant posséder une bonne visibilité (personnes handicapées visuellement) quel que soit le périphérique utilisé (smartphone, tablette ordinateur).

Petit exemple: La taille physique de 2 tablettes identiques. Leurs résolutions différentes (1 à 768 X 1024 et le deuxième, nouvelle génération, 1536 X 2048) alors que faire pour que le périphérique soit détecté et charge ainsi la bonne feuille de styles CSS.

Merci à tous.

Salut,

Il n'y a pas 36 solutions : utiliser les media queries, qui permettent, entre autres, de cibler les écrans en fonction de leur résolution (regarde du côté de la media query resolution et, pour les navigateurs sous Webkit ne reconnaissant pas encore resolution, de -webkit-device-pixel-ratio, utilisable avec min- et max-).

Exemple :

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
  /* Ici les règles CSS ciblant les écrans dont la densité de pixels est au moins de 2 (écrans Retina d'Apple, écrans de certains smartphones Android comme le Galaxy S4…) */
  /* dpi = points par pouce, 1dppx = 96dpi (pour les navigateurs ne reconnaissant pas encore l'unité dppx, comme IE Mobile 10) */
  /* dppx = points par pixel (unité plus pratique à manier que le point par pouce) */
}

pataco80 a écrit :


Petit exemple: La taille physique de 2 tablettes identiques. Leurs résolutions différentes (1 à 768 X 1024 et le deuxième, nouvelle génération, 1536 X 2048) alors que faire pour que le périphérique soit détecté et charge ainsi la bonne feuille de styles CSS.

Si tu parles des iPads, ils ont virutellement tous la même résolution : 1024 x 768, donc pas de problèmes pour la mise en page. Si tu veux affiner, tu peux utiliser les règles données par Victor pour remplacer certains éléments décoratifs de la css par l'équivalent en haute résolution.

Le SVG est une bonne alternative également (si on ne tient pas compte d'android 2.2).

P.S. : il y a des tutos sur ce site pour apprendre les media queries, le mobile first, etc.
Modifié par Patidou (23 Apr 2014 - 13:54)