[Résolu] Détection dpi sur mobile ou tablette

Bonjour

J'ai créé une page de test pour détecter le dpi d'un device et en la testant sur mobile et tablette à l'aide de media queries et je remarque qu'aucune réponse n'est mise en avant (fond bleu au lieu du fond orange) pour détecter le dpi de l'appareil.
Alors sur pc, j'arrive à détecter le dpi, mais pas sur mobile ou tablette.

Ma page de test se trouve ici

Quelqu'un pourrait-il m'éclairer en me disant le pourquoi du comment ?

Merci d'avance

Cordialement

Lu
Modifié par Luleen (15 Sep 2011 - 17:58)

Bon en fait je vous embête pour rien, c'est le navigateur qui en prends pas ces media queries en compte car sur Firefox mobile, ca fonctionne très bien.

Sujet clos

Lu

Hello, petite question au passage, quel est l’intérêt de détecter les dpi dans ton cas?

Ben en fait je pensais que c'était un moyen de différencier un pc dont la résolution est de 1280x800 mais d'un dpi de 108 par exemple et une tablette dont la résolution est de 1280x800 mais dont le dpi est de 200+.

Mais bon tant pis

Lu

Je ne te comprends pas : ça fait déjà deux fois que je t'ai donné un code media queries pour les tablettes… C'est quoi le problème?

Re.

Ça fait plusieurs sujets dans lesquelles tu cherches à faire de la détection de device via les media-queries, et je commence à penser que tu prends le problème dans le mauvais sens.

Si tu veux utiliser les media-queries, tu ne dois pas penser en terme de device mais de place à l'écran.

Chercher à traiter différemment un iPad en mode paysage d'un desktop avec une résolution faible via les media-queries, ça n'a aucun sens, c'est le meilleur moyen de se casser les dents (mis à part détection foireuse via JS peux-être )

Patidou a écrit :
Je ne te comprends pas : ça fait déjà deux fois que je t'ai donné un code media queries pour les tablettes… C'est quoi le problème?

Parce que ca ne fonctionne pas, ca ne donne pas ce que je souhaite.

Florian_R, ce n'est pas moi qui choisit malheureusement mais on me demande un affichage différent pour PC, mobile et tablette donc j'explore toutes les pistes possibles c'est tout.

Du coup j'ai une feuille de style de base pour pc, une feuille de style pour tablette (où j'ai juste mis 2 résolutions d'écrans en fait), une feuille de style pour mobile qui fonctionne aussi seulement aux résolutions d'écrans, et une feuille de style pour mobile en mode paysage.

Lu

Luleen a écrit :
Florian_R, ce n'est pas moi qui choisit malheureusement mais on me demande un affichage différent pour PC, mobile et tablette donc j'explore toutes les pistes possibles c'est tout.

Souvent essayer de faire comprendre à son chef de projet / client que la demande est irréalisable autrement que de façon bancale est bien plus efficace que se triturer à chercher cette solution bancale.

Ben c'est ce que j'ai finis par faire vu que je ne peux régler l'affichage qu'en fonction des résolutions (plus ou moins)

C'est bizarre ton truc, j'ai un macbook pro de base en 1280*800, j'ai aussi un iPad (mais avec une autre tablette c'est pareil) et l'affichage de mon site est bien différent sur l'un et sur l'autre*.


*je ne gère pour le moment que les tablettes en mode portrait, je dois encore aménager la version paysage.

L'ipad a une résolution de 1024x768. Les meta queries que tu utilises pour l'iPad sont ceux que tu m'avais données mais elles ne conviennent pas aux cas sur lesquels je dois bosser.

Ok, faisons un test : est-ce que mon site s'affiche bien* avec une têtière fond jaune en mode paysage sur ta tablette 1280*800?

*c'est un peu déglingué mais c'est pour le test
Modifié par Patidou (16 Sep 2011 - 14:38)

Hum je te dis dès que je récupère la tablette ...

Merci en tout cas de m'aider !

Edit : oui tout à fait ! Tetière jaune en paysage et "(tablette)"
Modifié par Luleen (16 Sep 2011 - 15:14)

Bah voilà, tu n'as plus qu'à repiquer le code de mon fichier css. C'est libre.

Ok merci beaucoup ! Si un jour je trouve une exception je t'en ferais part

Lu

Ah ben j'ai un affichage tablette sur mon pc de bureau en 1280x1024

Et j'ai la tetiere jaune sur mon pc de bureau aussi en visionnant ton site

Lu
Modifié par Luleen (16 Sep 2011 - 16:06)

Effectivement , je vais regarder ça.

Pour info, j'avais mis ceci pour que ca fonctionne sur tablette, au détriment des pc ayant les résolutions 1024x768 et 1280x800, tant pis

@media only screen and (max-device-width:1280px) and (max-device-height:800px) and (orientation:landscape), only screen and (max-device-width:800px) and (max-device-height:1280px) and (orientation:portrait), only screen and (max-device-width:1024px) and (max-device-height:768px) and (orientation:landscape), only screen and (max-device-width:768px) and (max-device-height:1024px) and (orientation:portrait) 

Un astuce pour sniffer le browser (c'est mal je sais) : An HTML5 boilerplate addon for CSS browser nitpicks. Si les tablettes ont un navigateur spécifique, il y a peut-être moyen d'utiliser cette astuce avec les media queries.