Pourquoi mes requêtes média CSS3 ne fonctionnent-elles pas sur les appareils mobiles ?

Question

Dans le fichier styles.css, j'utilise des requêtes média, qui utilisent toutes deux une variation de :

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Les sites sont redimensionnés selon la disposition que je souhaite dans un navigateur ordinaire (Safari, Firefox) lorsque je réduis la fenêtre, mais la disposition mobile ne s'affiche pas du tout sur un téléphone. Au lieu de cela, je ne vois que le CSS par défaut.

Quelqu'un peut-il m'indiquer la bonne direction ?

Answer 1

Ces trois conseils étaient utiles, mais il semble que je doive ajouter une balise méta :

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

Maintenant, il semble fonctionner à la fois sur Android (2.2) et sur l'iPhone, sans problème...

Answer 2

N'oubliez pas d'utiliser les déclarations css standard. au-dessus de la requête média ou la requête ne fonctionnera pas non plus.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Answer 3

Je soupçonne le mot-clé only est peut-être le problème ici. Je n'ai aucun problème à utiliser des requêtes média de ce type :

@media screen and (max-width: 480px) { }

Answer 4

j'ai utilisé bootstrap dans un site de presse mais il ne fonctionne pas sur IE8, j'ai utilisé le javascript css3-mediaqueries.js mais cela ne fonctionne toujours pas. si vous voulez que votre media query fonctionne avec ce fichier javascript ajoutez screen à votre ligne media query dans css

Voici un exemple :

<meta name="viewport" content="width=device-width" />

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css Ligne de liaison aussi simple que la ligne ci-dessus.

Answer 5

Aujourd'hui, j'ai eu une situation similaire. La requête média ne fonctionnait pas. Au bout d'un moment, j'ai constaté que l'espace après "et" était manquant. Une requête média correcte devrait ressembler à ceci :

@media screen and (max-width: 1024px) {}