[Résolu] Détection de device pour affichage tablette ou pc

Des livres incontournables pour tout maîtriser

Auteur
Luleen	# 05 Jul 2011, 13:27:56
129 Posts	Bonjour Je suis en train de refaire mon site pour un affichage optimisé PC et tablette. Sous tablette, l'affichage sera complètement différent du pc et du coup j'ai testé avec une tablette dont la résolution est de 1280*800. De ce fait, j'ai utilisé, pour mettre des styles qui seront appliqués sous tablette la css suivante : `@media all and (max-width : 1280px) and (orientation:landscape) { }` sauf que sur pc, si le navigateur est plus largue que haut et que la largeur est inférieure à 1280px, il applique les mêmes styles que sur la tablette. Ma question est donc : est-il possible, en css ou javascript, de détecter le device et de dire : si c'est une tablette, appliquer les styles suivants, si c'est un pc appliquer ces autres styles etc ? Merci d'avance pour toute réponse Lu Modifié par Luleen (05 Jul 2011 - 13:54)
129 Posts
Patidou	# 05 Jul 2011, 13:47:06
2269 Posts	Tu dois indiquer la largeur du device, exemple pour iPad : `@media only screen and (min-device-width: 501px) and (max-device-width: 1024px) and (orientation:portrait) { }` Ici il y a une largeur minimum car j'ai aussi une règle pour les mobiles : `@media handheld, only screen and (max-device-width:500px), only screen and (max-width:500px), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {}` Modifié par Patidou (05 Jul 2011 - 13:51) Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2269 Posts
Luleen	# 05 Jul 2011, 13:51:42
129 Posts	Pourquoi min-device-width: 501px pour l'ipad ? Si je mets `@media only screen and (min-device-width: 800px) and (max-width : 1280px) and (orientation:landscape) { }` ca ne marche pas en tout cas
129 Posts
Luleen	# 05 Jul 2011, 13:54:41
129 Posts	Ah si pardon, je me suis trompée dans ma formulation il manquait le device à max-width Je ne connaissais pas le only screen pour tablette et handheld pour mobile je suppose... Merci beaucoup ! Lu
129 Posts
Patidou	# 05 Jul 2011, 13:56:29
2269 Posts	Parce que j'ai mes styles pour mobiles qui vont de 0 à 500 pixels, ensuite j'ai les styles pour iPad qui vont de minimum 501 à 1024 pîxels. Si tu n'as pas de règles pour mobiles tu peux faire ceci : `@media only screen and (max-device-width : 1280px) and (orientation:landscape) { }` Modifié par Patidou (05 Jul 2011 - 14:01) Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2269 Posts
Patidou	# 05 Jul 2011, 13:58:43
2269 Posts	P.S. : le mot clé only sert à empêcher certains vieux navigateurs d'aller voir à l'intérieur des media queries, ce qui peut éviter des erreurs à l'affichage. Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2269 Posts
Luleen	# 05 Jul 2011, 14:00:52
129 Posts	Patidou a écrit : Parce d'abord j'ai mes styles pour mobiles qui vont de 0 à 500 pixels, ensuite j'ai les styles pour iPad qui vont de minimum 501 à 1024 pîxels. Si tu n'as pas de règles pour mobiles tu peux faire ceci : `@media only screen and (max-device-width : 1280px) and (orientation:landscape) { }` Je m'essaierais au mobile ... plus tard si je suis courageuse Mais ca viendra !
129 Posts
Luleen	# 06 Jul 2011, 11:29:53
129 Posts	Rebonjour Nouveau soucis lié à ma problématique en fait. Hier je bossais sur Mac et cela fonctionnait bien dans Chrome et Firefox et tablette (la reconnaissance des CSS) mais aujourd'hui, sur pc et toujours avec mon `@media only screen and (max-device-width : 1280px) and (orientation:landscape) {` Si mon navigateur chrome passe en dessous de 1280px de largeur en paysage, il m'applique les styles de la tablette, alors que firefox non... Donc j'ai essayé de vider le cache etc mais rien n'y fait. Merci de votre aide Lu
129 Posts
Luleen	# 06 Jul 2011, 11:34:25
129 Posts	Ok problème résolu en ajoutant une min-device-width tel que ci dessous `@media only screen and and (min-device-width:800px) and (max-device-width:1280px) and (orientation:landscape) {` Je ne sais pas pourquoi Chrome a fait ca mais bon, problem solved Lu
129 Posts
Luleen	# 06 Jul 2011, 14:34:56
129 Posts	Luleen a écrit : Ok problème résolu en ajoutant une min-device-width tel que ci dessous `@media only screen and and (min-device-width:800px) and (max-device-width:1280px) and (orientation:landscape) {` Je ne sais pas pourquoi Chrome a fait ca mais bon, problem solved Lu Bon en fait ca ne marche pas du tout, il y avait deux "and" du coup ca désactivait ma css et du coup plus de problème sous chrome... Donc là j'ai toujours la css de tablette qui passe sur le pc si le navigateur fait moins de 1280px de largeur... Si quelqu'un peut m'aider je ne suis pas contre Merci
129 Posts
dju	# 11 Jul 2011, 15:29:38
1 Posts	Bonjour, si ton problème est toujours d'actualité, j'ai peut-être une piste pour toi. Avec les seules@media-queries tu vas avoir du mal à distinguer tablette de desktop, la limite est bien trop floue pour le navigateur. Ce que tu peux faire c'est passer par un peu de js. Tu ne charges ta css en question que si tu es sur un appareil tactile (évènement 'touchstart' par exemple) et au diable les vieux devices qui ignoreraient ta règle. Tu vois comment faire ? Dju
1 Posts
Patidou	# 13 Jul 2011, 08:23:42
2269 Posts	Il y a des personnes qui ont Javascript désactivés et certains navigateurs mobiles qui n'ont pas encore d'API touch. Ce n'est quand même pas compliqué de gérer les 2 résolutions disponibles sur les tablettes. Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2269 Posts
gorn	# 15 Feb 2012, 14:38:28
82 Posts	Patidou a écrit : Il y a des personnes qui ont Javascript désactivés et certains navigateurs mobiles qui n'ont pas encore d'API touch. Ce n'est quand même pas compliqué de gérer les 2 résolutions disponibles sur les tablettes. dans le sens où les résolutions des tablettes risquent de grandir, j'ai des doutes sur l'utilisation d'un max-device-width à 1024 et à 1280 ça englode déjà des écrans d'ordi. J'imagine du coup que la solution de dju est meilleure ? qu'en penses les autres ?
82 Posts
Prévenir un modérateur