[Résolu] Problème de media queries

Bonjour bonjour

J'avais déjà exposé mon problème auparavant mais je préfère tout reprendre à zéro (sauf si les modérateurs ne le préfèrent pas, informez en moi )

Je cherche comment détecter le device d'affichage d'un site web.

On m'avait dit qu'il fallait utiliser screen (ou only screen) pour tablette et handheld pour les téléphones mobiles et je me rends compte que ca ne marche pas du tout comme cela.

J'ai du bidouiller pour obtenir ce que je voulais mais je suis confrontée à un soucis, c'est à dire que pour une tablette dont la résolution est 1024*768 je mets le code suivant :

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

Mais du coup, sur un pc dont la résolution est la même (netbook par exemple), il prend cet affichage réservé à la tablette... Comme quoi le "only screen" n'est pas réservé aux tablettes.

Avez vous un moyen fiable de détecter le device ? Car je commence à désespérer...

Merci d'avance

Lu
Modifié par Luleen (01 Sep 2011 - 15:46)

Tu as vu le tuto ?

Oui et cela ne change pas le fait que mes media queries avec screens se répercutent sur le pc (ou l'écran de pc est compris dans les screens à ce moment là je suis fichue) ou que le handheld ne fonctionne pas...

Luleen a écrit :
Je cherche comment détecter le device d'affichage d'un site web.

Pas en CSS. En JavaScript ou côté serveur en lisant le contenu de l'en-tête HTTP User-Agent c'est possible, mais il existe des centaines (milliers...) de User-Agent différents et s'y retrouver n'est pas évident. La détection du navigateur ou de la plateforme, aussi appelée browser sniffing, et généralement considérée comme une mauvaise pratique. On lui préfère la détection des fonctionnalités (en JavaScript).

Luleen a écrit :
On m'avait dit qu'il fallait utiliser screen (ou only screen) pour tablette et handheld pour les téléphones mobiles et je me rends compte que ca ne marche pas du tout comme cela.

Effectivement, on t'a dit des bêtises.

Luleen a écrit :
Mais du coup, sur un pc dont la résolution est la même (netbook par exemple), il prend cet affichage réservé à la tablette...

L'affichage n'est pas réservé aux tablettes (la spec CSS ignore la notion même de tablette et c'est tant mieux). Tu l'as réservé aux écrans de largeur maximale 1024px lorsqu'ils sont en mode paysage, et de largeur maximale 768px lorsqu'ils sont en mode portrait. Bien sûr que ça peut s'appliquer à un netbook.

Luleen a écrit :
ou l'écran de pc est compris dans les screens

Bien sûr qu'un écran est un média "screen". Qu'est-ce que ça pourrait être d'autre?

Bon je vais faire plus simple même si ca ne résoud pas complètement mon problème ^^

Pour faire en sorte d'un affichage pour une résolution de 1280*800 ou 1024*768, mon média queries devra etre celui ci non ?

@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) 

on est d'accord ?

Désolé, mal lu. Je recommence…

En fait, il ne faut pas utiliser height mais seulement width.
Modifié par Patidou (01 Sep 2011 - 14:08)

Ca va peut être te paraitre idiot mais pourquoi ne pas utiliser le height ?

Quand l'iPad (par exemple) est la verticale, la largeur est de 768px et en mode paysage la largeur est de 1024px. AMHA on peut utiliser height, mais alors rien que lui: c'est l'un ou l'autre, pas les deux.
Modifié par Patidou (01 Sep 2011 - 15:44)

Oui mais si on stipule la largeur et la hauteur et l'orientation, c'est bon ?

Enfin bref j'ai fais ce que j'ai envoyé un peu avant et ca a l'air d'avoir l'effet escompté...

J'ai vraiment l'impression de mal m'exprimer quand on me répond pas ou qu'on me répond à côté de la plaque à chaque fois lol c'est très frustrant !

Mais j'ai bien compris qu'il n'existe pas de solution à ce que je recherchais initialement (et pour ma part le handheld ne fonctionne pas du tout). Allez je vais mettre ca en résolu

Merci de votre aide.

Lu

Ben écoute, franchement je ne me souvenais plus très bien du sujet précédent. Tu pouvais continuer la discussion là-bas, il n'y aurait pas eu de problème je pense.

Bon, pour revenir à ton problème :

/*code commun à tous les devices*/

blablabla

/*--------------------------
partie réservée aux mobiles (jusque 500px de large), le media handheld sert pour les TRÈS VIEUX GSM avec des vieilles versions de Opera Mini
___________________________*/

@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) {

/*css mobiles*/

}

/*tablettes en mode portrait (à partir de 501px)
======*/
@media only screen and (min-device-width: 501px) and (max-device-width: 1024px) and (orientation:portrait) , only screen and (min-device-width: 501px) and (max-device-width: 1280px) and (orientation:portrait){ 

}


/*tablettes en mode paysage (à partir de 501px)
======*/
@media only screen and (min-device-width: 501px) and (max-device-width: 1024px) and (orientation:landscape) , only screen and (min-device-width: 501px) and (max-device-width: 1280px) and (orientation:landscape){ 

}

Aaaaaaaaaaaaaaaaaaaah ok le handheld sert pour les très vieux mobiles jusqu'à 500px de large Oo ok effectivement ce n'est pas du tout pour moi alors !

Donc c'est encore pire que ce que je pensais, ya vraiment aucun moyen de différencier les devices, juste différencier en terme de largeur, hauteur, orientation et autre attributs possibles en média. C'est un peu une grosse déception mais d'un coup je comprends mieux ! J'aurais mis le temps mais j'ai compris ! Merci

Lu

Luleen a écrit :
Aaaaaaaaaaaaaaaaaaaah ok le handheld sert pour les très vieux mobiles jusqu'à 500px de large Oo ok effectivement ce n'est pas du tout pour moi alors !

Nooooon, cette ligne cible les vieux gsm (handheld) ET les nouveaux jusqu'à 500px (il y a une virgule après handheld).

P.S. : on va y arriver
Modifié par Patidou (01 Sep 2011 - 16:06)

Oui mais les nouveaux vont au délà de 500px ^^

Je pense aux smartphones qui sont ok en mini en 240*320 et 320*480 mais il y a aussi ceux qui sont en 480*800

Luleen a écrit :
…mais il y a aussi ceux qui sont en 480*800

Ou 640*960 comme l'iphone 4, mais il est reconnu en css comme faisant du 320*480, c'est sur la densité de pixels que l'on peut les tester.