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

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)

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)

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

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

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)

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.

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 !

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

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

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

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

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.

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 ?