[Résolu] Media queries et smartphones haute résolution

Bonsoir tout le monde,

Voilà, j'ai défini les media queries pour afficher sur les smartphones un menu constitué de boutons, contrairement à l'affichage sur un PC où le menu est représenté par du texte (qui prend plus de place que les boutons). Mais sur un Sony Z5 compact en mode paysage, c'est bien du texte et pas des boutons qui apparaissent dans le menu. J'ai vite compris que cela venait de la haute résolution de l'écran : 1280 pixels en largeur.
Donc finalement que faire, est-ce qu'il suffit d'écrire le media queries :

(max-width: 1280px) and (orientation:landscape)

pour obtenir le bon affichage sur le smartphone haute résolution ?

Bonjour,

Actuellement aucun smartphone n'a une largeur *utilisable* aussi élevée que 1280px : http://mydevice.io/devices/

Si ta media query ne fonctionne pas, c'est peut-être parce que tu n'as pas indiqué ce qu'il fallait dans la balise HTML meta viewport ?

Il manque des infos pour dépanner

Salut Raphael,

J'ai bien la balise viewport. Initialement, j'avais mis le max-width à 480px, pour m'adapter aux smartphones, et je me demande à combien je dois le fixer pour tenir compte des smartphones retina ou autres hd. Voici le code actuel :

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" media="all and (max-width: 1280px) and (orientation:portrait)" href="css/tablettes_portrait.css" />
	<link rel="stylesheet" media="all and (max-width: 1280px) and (orientation:landscape)" href="css/tablettes_paysage.css" />
	<link rel="stylesheet" media="all and (max-width: 480px) and (orientation:portrait)" href="css/mobiles_portrait.css" />
	<link rel="stylesheet" media="all and (max-width: 480px) and (orientation:landscape)" href="css/mobiles_paysage.css" />

Déjà, je ne devrais peut-être pas mettre le même max-width en mode portrait et paysage, je pense ?
Modifié par Thomas237 (01 May 2016 - 11:28)

Bon, j'ai modifié comme ça :

<link rel="stylesheet" media="all and (max-width: 750px) and (orientation:landscape)" href="css/mobiles_paysage.css" />

Et ça a l'air d'aller.
C'est vrai qu'après vérification, tu as raison : la plus haute résolution pour un smartphone semble être l'iphone 6 plus avec 736 pixels en paysage.

Juste pour marquer le sujet comme résolu. Merci

Salut Thomas , est ce qu'on doit implemnter tout cela
''
<link rel="stylesheet" media="all and (max-width: 1280px) and (orientation:portrait)" href="css/tablettes_portrait.css" />
<link rel="stylesheet" media="all and (max-width: 1280px) and (orientation:landscape)" href="css/tablettes_paysage.css" />
<link rel="stylesheet" media="all and (max-width: 480px) and (orientation:portrait)" href="css/mobiles_portrait.css" />
<link rel="stylesheet" media="all and (max-width: 480px) and (orientation:landscape)" href="css/mobiles_paysage.css" />

''