1493 sujets

Web Mobile et responsive web design

[Résolu] @media querie pas prise en compte

Bonsoir,

Je ne sais pas pourquoi mais ma balise @media querie n'est pas prise en compte sur Ipad 2

Depuis ce matin que j'y suis, je cherche, je ne vois plus clair dans le code ...

Mon viewport :
<meta name="viewport" content="width=device-width">


Mon @media screen :
@media only screen and (max-device-width:980px) {
	#header{display:none;}
	h1 {
		width:288px;
		margin:0 auto;
	}
}

Le display none du h1 est pour tester : il apparaît toujours !

Si une âme charitable peut me remettre les yeux en face des trous Smiley smile

Merci
Merci @Blondin, je regarde.

@Raphael, le site n'est pas encore en ligne sur un serveur de prod, il est en interne. Quelle partie du code voudrais-tu Le code interprété ?
Je viens d'essayer :

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


Et mon header est toujours là Smiley decu
Administrateur
blondin a écrit :
le device-width de l'Ipad 2 ne serait-il pas plutôt de 1024px?

Pour info, une liste de templates pour les différents supports.

Non, la valeur de device-width sur iPad (toutes versions) est invariable, elle est toujours de 768px même en paysage.

Il suffit de tester sur http://mobitest.me/ en choisissant la valeur de viewport width=device-width.

C'est d'ailleurs pour cette raison que je n'utilise plus la valeur width=device-width : http://blog.goetter.fr/post/32513655620/viewport-adieu-width-device-width

Les valeurs du lien romanliutikov.com sont malheureusement erronées.
Administrateur
Scots a écrit :
Et mon header est toujours là Smiley decu

Le viewport a l'air OK et tes media queries aussi.
Le problème vient d'ailleurs.
Es-tu sûr d'avoir assez de poids dans ta règle CSS ?

Par exemple, que donne un petit coup d'important ?
#header {display: none !important;}
Génial le mobitest Smiley smile

J'ai donc bien 768px pour le CSS. La valeur 1024 est valable pour le JS en fait si j'ai bien tout lu.

Well, même avec !important : idem Smiley decu

D'habitude jamais de soucis mais là j'ai dû faire une boulette aussi grosse que moi Smiley smile
Administrateur
Scots a écrit :

J'ai donc bien 768px pour le CSS. La valeur 1024 est valable pour le JS en fait si j'ai bien tout lu.

Normalement JS indique la même valeur de device-width que CSS, c'est à dire aussi 768px en paysage si ton viewport a pour valeur "width=device-width".
Ah ok, merci pour cette info Smiley smile

Bon, je pige pas mon bug. Je vais reprendre tout mon CSS depuis la première ligne. Me demande s'il n'y a pas un truc dans le reset ...

Smiley decu
Une après midi au grand air m'a fait du bien ... J'avais bien fait une boulette et je vous présente mes excuses pour vous avoir importunés (bien que j'ai appris des choses Smiley smile ) :

J'avais déjà, en fin de style.css, mis des medias queries (j'ai dû reprendre ça d'un de mes autres sites).

Du coup, c'était contradictoire et ne fonctionnait pas.

Moralité : Faites bien attention quand vous codez et surtout prenez l'air Smiley cligne

Merci à tous.
Sujet clos
Aller à