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

Dans les styles.css, j’utilise des requêtes de mé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 que je souhaite dans un navigateur standard (Safari, Firefox) lorsque je réduis la fenêtre. Cependant, la mise en page mobile ne s’affiche pas du tout sur un téléphone. Au lieu de cela, je vois juste le CSS par défaut.

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

Ces trois conseils étaient utiles, mais il semble que je devais append une balise meta:

  

Maintenant, il semble fonctionner à la fois sur Android (2.2) et sur iPhone …

N’oubliez pas d’avoir les déclarations CSS standard audessus 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; } } 

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

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

J’ai utilisé bootstrap dans un site de presse, mais cela n’a pas fonctionné sur IE8, j’ai utilisé javascript css3-mediaqueries.js mais ne fonctionne toujours pas. Si vous souhaitez que votre requête multimédia fonctionne avec ce fichier javascript, ajoutez un écran à votre ligne de requête multimédia dans css

Voici un exemple :

     

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

Aujourd’hui, j’ai eu une situation similaire. La requête multimédia n’a pas fonctionné. Au bout d’un moment, j’ai trouvé cet espace après «et» manquait. Une requête média appropriée devrait ressembler à ceci:

 @media screen and (max-width: 1024px) {} 
 @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; } 

J’utilise quelques méthodes en fonction. Dans la même feuille de style, j’utilise: @media (max-width: 450px), ou pour le séparer, assurez-vous d’avoir correctement le lien dans l’en-tête. J’ai jeté un coup d’oeil à votre correction et vous avez un tableau déroutant de liens vers CSS. Il agit comme tu le dis aussi sur HTC desire S.

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

J’avais copié les requêtes média bootstrap 4 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 automatiquement utilisé // . Ce n’est pas un freeware donc j’ai supposé que ça avait raison. Il y a un menu de préférences pour corriger ce comportement.

Validez également votre css avec un validateur en ligne fiable. En voici un par W3

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