web-dev-qa-db-fra.com

Les requêtes multimédia se déclenchent à une mauvaise largeur

Je construis une page sensible et les requêtes de médias se déclenchent à la mauvaise largeur. J'utilise Chrome.

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

Par exemple, cette règle fonctionne, mais sa taille est incorrecte. Cette règle est déclenchée à 1320px et non à 1200px . J'ai la balise meta pour HTML en place. Il semble que la requête des médias soit environ 100 pixels plus large qu’elle ne le devrait normalement.

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

J'ai vérifié le site responsive précédent que j'avais créé et ces points d'arrêt se déclenchaient correctement. J'ai testé le navigateur sur différents sites Web et les requêtes des médias sont également satisfaisantes. 

J'ai trouvé une question similaire sur le débordement de pile, mais elle est restée sans réponse.

Point d'interrogation des requêtes multimédias avec une valeur incorrecte

Vous ne savez pas quel est le problème?

htmlcssmedia-queriesmeta-tags
42
swollavg

Cela se produit généralement si vous avez agrandi la fenêtre du navigateur à une taille autre que 100%. Dans votre navigateur, sélectionnez le menu déroulant "Affichage" et assurez-vous qu'il est défini sur 100%. Si vous effectuez un zoom avant ou arrière, cela déclenchera des requêtes de support de manière inappropriée.

Et ne vous inquiétez pas de se sentir gêné. C'est probablement arrivé ou arrivera à tout le monde… mais une seule fois.

Afin d'éviter ce problème dans son ensemble, vous devriez envisager de définir vos requêtes multimédia en utilisant des unités relatives (em ou rem plutôt que px).

Vous pouvez également appliquer la définition du niveau de zoom du navigateur sur 100% du chargement de la page à l'aide de javascript. 

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
138
davidcondrey

Juste un petit ajout, pour empêcher les autres de chercher plus loin même si la réponse est donnée ici.

Mon zoom était déjà réglé à 100% et le problème était toujours là . Si vous rencontrez la même chose, la réponse est simple: réglez votre zoom sur 90% et sur 100%, et le tour est joué, les points de rupture sur la largeur je veux.

3
Pieter

Avez-vous des iframes (ou des modaux ou des fenêtres plus petites) chargeant la même feuille CSS avec votre requête multimédia? Si c'est le cas, c'est un problème de cache et vous devez lier le fichier CSS avec un paramètre dumb tel que:

<link href="myCss.css?iframe=1" />

Afin de charger le fichier css en tant que nouveau fichier au lieu de prendre la version mise en cache ... j'espère que je suis clair :)

2
Pouki

Je me suis retrouvé sur ce fil après une heure de frustration. Finalement, j'ai réalisé que j'avais utilisé accidentellement min-height au lieu de min-width:

@media screen and (min-height: $sm) { }

au lieu de...

@media screen and (min-width: $sm) { }

Juste un rappel pour vérifier rapidement si vous aviez le même problème que moi face à Palm , il est tard.

0
AdheneManx

Un autre ajout. Après une heure de débogage, j’ai réalisé que j’avais codé plusieurs requêtes multimédia et que, comme les fichiers css étaient exécutés de haut en bas, j’étais en train de remplacer la logique de requête multimédia précédente ...

@media (max-width: 700px) {
 .some-class { background-color: red; }
};

// This will override the above styling (assuming max-width logic is true)
@media (max-width: 800px) {
 .some-class { background-color: yellow; }
};
0
Amir

Regardez vos unités: rem, em, px.

Je viens d'avoir ce problème et c'est parce que ma taille de police de base est 10px et que j'ai mis max_width: 102.4rem dans la requête multimédia, mais l'activation est d'environ 1600px au lieu de 1024px attendue.

Il s'active toujours à 1600px sur le mien avec 102.4em, mais il fonctionne comme prévu lorsque j'utilise 1024px.

Voici un article qui parle de tout ce à quoi je fais allusion:

https://zellwk.com/blog/media-query-units/

Au début, j’ai manqué la réponse la plus votée parce que j’ai rencontré le problème en utilisant rem pas px. Clairement, la racine du problème semble être les unités.

0
agm1984