[Résolu] Media-querie pour "toutes les tablettes en mode paysage&

Bonjour,

je suis en train de travailler sur la partie responsive design de mon site : je n'ai aucun problème avec mes média-queries pour cibler les différents supports + le mode portrait ou paysage, SAUF UN!!
sur lequel je me casse les dents à chaque fois (ce n'est pas mon premier site en responsive design) c'est:

est-ce qu'il y a un moyen de cibler TOUTES LES TABLETTES EN MODE PAYSAGE avec une media-querie , et si oui, laquelle ??

je n'arrive pas à trouver une réponse claire et précise.

Merci, j'espère que quelqu'un pourra m'aider

Bonjour et bienvenue,

celles qui font 640px de large ou celles en 1280 ?
La définition de "tablette" est un peu floue, tu peux préciser auxquelles tu penses ?

en fait c'est exactement ma question: est-ce qu'il n'y a pas une media-querie qui balaie TOUTES les tablettes en mode paysage ? Cà me semble impossible d'aller mettre une media-querie pour chaque sorte de tablette, si on veut cibler toutes les tablettes paysage.

je veux dire, si on veut cibler les smartphone, ou seulement les smartphone portrait, ou seulement les smartphone paysage, il y a UNE media-querie , il n'y a pas besoin d'aller cibler chaque sorte de smartphone:

/* Only phones */
@media (max-width: 767px) {}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {}

/* Only Phones (Portrait) */
@media (max-width: 479px) {}

je voudrais faire la même chose pour cibler TOUTES les tablettes paysage,

merci

letsgo a écrit :

je voudrais faire la même chose pour cibler TOUTES les tablettes paysage,

Bonjour,

C'est malheureusement impossible, comme l'a suggéré Felipe.

Tu peux le constater ici : http://mydevice.io/devices/#sortTablets

Toutes les tablettes ont des tailles différences, certaines tablettes ont une largeur inférieure à certains smartphones, et on ne sait pas du tout ce que l'avenir nous réserve parmi les nouvelles tablettes à venir.

En clair : il faut faire des compromis.

Salut,

Aux remarques pertinentes de Felipe et de Raphaël j'ajouterai qu'il vaut mieux arrêter de penser type de périphérique pour penser dimensions de l'écran et caractéristiques particulières de l'écran (densité de pixels, orientation…).
Modifié par Victor BRITO (10 Jul 2014 - 22:18)

Merci à tous,

j'ajouterai qu'il vaut mieux arrêter de penser type de périphérique pour penser dimensions de l'écran et caractéristiques particuliers de l'écran (densité de pixels, orientation…).

en fait je me rends compte qu'il me manque les bases pour bien faire du responsive, je me sers des media-queries proposées par le framework que j'utilise; si vous avez des liens de cours ou/et tuto pour bien comprendre les bases du responsive design et savoir bien gérer les:
media-queries
viewport

je suis preneuse

letsgo a écrit :
si vous avez des liens de cours ou/et tuto pour bien comprendre les bases du responsive design et savoir bien gérer les:
media-queries
viewport

je suis preneuse

Et les tutos d'Alsacréations, c'est pour les chiens ? Il y a à boire et à manger.

Bonjour

@Raphael
sur le site de devices.io, le device-width correspond au chiffre le plus grand pour les smartphones et les phablets. Mais pour les tablettes c'est le chiffre le plus bas (mode portrait)

Par conséquent que dois-je écrire dans les mediaquerries?

@media  screen and  (max-device-width: 1280px) and (orientation:landscape)

ou bien la valeur indiquée dans le tableau?

Enfin comment doit-on utiliser le chiffre indiqué comme ratio?

Cordialement

Pour le chiffre ratio, je pense avoir trouvé et ce pour tenir compte des écrans avec haute résolution, et en particulie rle problème des images.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (-o-min-device-pixel-ratio: 3/2),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
  /*vos styles ici*/
}