web-dev-qa-db-fra.com

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

Dans styles.css, j'utilise des requêtes multimédia, qui utilisent toutes deux une variante de:

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

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

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

Les sites redimensionnent à la mise en page souhaitée dans un navigateur classique (Safari, Firefox) lorsque je réduis la fenêtre. Toutefois, la mise en page pour mobile ne s'affiche pas du tout sur un téléphone. Au lieu de cela, je viens de voir le CSS par défaut.

Est-ce que quelqu'un peut-il me montrer la bonne direction?

htmlcsscss3mobile-websitemedia-queries
158
redconservatory

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

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

Maintenant, il semble que cela fonctionne à la fois dans Android (2.2) et iPhone bien ...

398
redconservatory

N'oubliez pas d'avoir les déclarations CSS standard ci-dessus la requête multimé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;
    }
}
53
The4thIceman

Je soupçonne que le mot clé only est peut-être le problème ici. Je n'ai aucun problème en utilisant des requêtes de médias comme ceci:

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

21
Moin Zaman

j'ai utilisé bootstrap dans un site de presse, mais cela ne fonctionnait pas sous IE8. J'utilisais javascript css3-mediaqueries.js mais ne fonctionnais toujours pas. si vous voulez que votre requête multimédia fonctionne avec ce fichier javascript, ajoutez un écran à votre ligne de requête multimédia en 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.

17
Mohsen

Aujourd'hui, j'ai eu une situation similaire. La requête média n'a pas fonctionné. Après un moment, j'ai trouvé cet espace après 'et' manquait. La requête média appropriée devrait ressembler à ceci:

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

Assurez-vous que tous vos commentaires css utilisent ce balisage /* ... */ - qui est le balisage de commentaire correct pour css selon MDN

J'avais copié bootstrap 4 requêtes multimédia directement à partir de leurs documents et chaque requête est étiquetée avec le même balisage de commentaire de style javascript //!

De plus, l'éditeur de texte IntelliJ m'a permis de commenter des lignes spécifiques de CSS dans un fichier LESS, mais utilisait automatiquement //. Ce n'est pas un logiciel gratuit, alors j'ai supposé que tout était correct. Il existe un menu de préférences pour corriger ce problème.

Validez également votre css avec un validateur en ligne digne de confiance. en voici une de W

2
Cameron Donahue
@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}
1
Ketam Srinivas

Pour moi, j'avais indiqué max-height au lieu de max-width.

Si c'est vous, allez le changer!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }
0
Ruto Collins

J'utilise quelques méthodes en fonction. Dans la même feuille de style, j'utilise: @media (max-width: 450px) ou, séparément, assurez-vous que le lien est correctement placé dans l'en-tête. J'ai jeté un coup d'œil à votre solution et vous avez un tableau confus de liens vers CSS. Il agit comme vous le dites aussi sur HTC desire S.

0
benteh

J'ai récemment rencontré ce problème également et j'ai découvert par la suite que c'était parce que je n'avais pas laissé d'espace entre and et (. C'était l'erreur

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

Puis je l'ai changé en ceci pour le corriger

@media screen and (max-width:768px){
}
0
sdkcodes

Cela peut également arriver si le niveau de zoom du navigateur n'est pas correct. Le zoom de la fenêtre de votre navigateur doit être de 100%. Dans Chrome utilisez Ctrl + 0 pour réinitialiser le niveau de zoom.

0
Suhail AKhtar

Lancer une autre réponse sur le ring. Si vous essayez d'utiliser des variables CSS, cela échouera discrètement.

@media screen and (max-device-width: var(--breakpoint-small)) {}

Les variables CSS ne fonctionnent pas dans les requêtes multimédia (par leur conception).

0
Seth