web-dev-qa-db-fra.com

Requête de média CSS ne fonctionnera pas

Je continue d'essayer de faire une requête multimédia dans mon doc CSS en faisant quelque chose comme:

@media screen and (max-device-width: 480px) { /*css here*/}

mais cela ne fonctionnera pas si je le teste sur un iPhone. J'ai essayé de changer les tailles et d'utiliser la fonction portrait/paysage, mais toujours rien. Qu'est-ce que je fais mal?

cssresponsive-design
9
Alex Clinton

J'appelle toujours le mien quand je lie le CSS dans la tête du HTML.

Un exemple d'une page actuelle sur laquelle je travaille:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />

Ceci sélectionne la documentation CSS qui sera chargée dès le départ au lieu de sélectionner les styles une fois le document CSS chargé (réduit le nombre de requêtes HTTP).

Lorsque vous faites cela dans le document CSS lui-même, vous devez généralement remplacer max-device-width par max-width.

5
mikedugan

Vérifiez que vous avez 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

dans la tête de votre doc 

Bonne chance

44
David Taiaroa

utilisez "max-width" au lieu de "max-device-width" qui est fixé par périphérique.

3
Shlomi Komemi

ceci est un exemple de requête multimédia css

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
your css here
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
your css here
}

Difficile à comprendre car vous n'avez pas fourni le code..mais les gens commettent l'erreur en ne ajoutant pas ces métadonnées

<meta name="viewport" content="width=device-width, initial-scale=1">
1
San

Je ne suis pas sûr mais je pense que le max-device-width d'un iphone est de 640px. Essaie.

0
Romain Braun
@media only screen and (min-width : 480px) {

}

Cela semble fonctionner correctement sous Android et iPhone.

0
Parfait