[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

Merci

Hello,

Tu as une page en ligne, ou une partie du code HTML ?

Bonjour,

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.

En espérant que cela puisse vous aider.

Bonne journée

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à

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.

Scots a écrit :
Et mon header est toujours là

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;}

@Raphaël, merci pour la correction et les ressources associées.

Génial le mobitest

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

D'habitude jamais de soucis mais là j'ai dû faire une boulette aussi grosse que moi

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

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 ...

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

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

Merci à tous.