Les Requêtes de média de tir à tort largeur

Je suis la construction d'un réactif de page et les media queries sont tir au mauvais largeur de la taille. Je suis en utilisant google Chrome.

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

Par exemple, cette règle fonctionne juste incendies à la bonne taille. Cette règle se déclenche à 1320px et pas 1200px.
J'ai la balise meta html en place. Il semble être le tir à la requête de média 100 pixels plus large que normall devrait.

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

J'ai vérifié sur le précédent site responsive j'ai fait et ces points d'arrêt sont à tirer correctement. J'ai testé le navigateur sur différents sites web et les media queries sont très bien.

J'ai trouvé une semblable question sur stack overflow, mais elle est restée sans réponse.

Les Media Queries point d'arrêt à la bonne valeur

Ne savez pas quel est le problème?

  • Pourrait-il avoir à faire avec l'appareil ratio de pixel?
  • Je ne suis pas à 100%$ sûr. Mon autre site responsive pauses sur les valeurs correctes. Je suis en utilisant exactement les mêmes ordinateur portable et d'un navigateur pour les deux projets.
  • Donc, il "feux" à 1320, mais pas à 1321? Êtes-vous sûr que cette règle ne soit pas remplacé par un plus tard règle pour .logo-pic? Quelles règles le style de l'inspecteur de montrer appliqué ou remplacées lorsque vous examinez les .logo-pic élément?
  • Veuillez fournir l'URL du site web
  • Essayez d'affiner votre recherche. Créer un nouveau fichier html avec un seul élément de cette classe et un lien vers votre fichier css. Si c'est de toujours se comporter mal, vous savez le problème est quelque part dans le css.
  • Je pense que vous avez de votre navigateur zoom 110% (1200 * 1.10 = 1320). Veuillez essayer d'appuyer sur le Ctrl+0 pour revenir à 100%
  • D'accord avec @ckuijjer. L'utilisation de google Chrome élément inspecteur pour vérifier la largeur calculée de l'élément de corps avec fenêtre de navigateur agrandie. Voir si il y a une différence de plus de quelques pixels.
  • Vous êtes correct. Le zoom du navigateur était le problème. J'ai réinitialiser le zoom sur mon navigateur et que tout allait bien. Merci

InformationsquelleAutor swollavg | 2014-11-02
  1. 171

    Une commune de la raison à cela est que si vous avez zoomé la fenêtre du navigateur pour une taille de 100%. Dans votre navigateur, sélectionnez le menu déroulant "Affichage" et assurez-vous qu'il est réglé à 100%. Si vous effectuez un zoom avant ou arrière, il va déclencher media-queries de façon inappropriée.

    Et ne vous inquiétez pas à propos de se sentir embarrassé. Il a probablement été, ou vont arriver à tout le monde.. mais seulement une fois.

    Afin d'éviter ce problème tous ensemble, vous devriez considérer la définition de vos requêtes de média à l'aide d'une des unités relatives (em ou rem plutôt que px).

    Vous pouvez également appliquer le réglage du navigateur le niveau de zoom à 100% au 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;
    • Littéralement, l'un des plus LoL digne des réponses et des situations que j'ai rencontrées sur DONC. Merci, david.
    • Pouah! Merci à vous pour me sauver des heures de débogage de mon CSS. Je ne savais même pas qu'il a été agrandie. Par la façon dont, au moins dans google Chrome sous Windows, vous pouvez également appuyez sur CTRL-0 pour revenir à 100%.
    • Vous ne voulez pas savoir combien de temps j'ai été frapper ma tête contre mon bureau jusqu'à ce que j'ai pu résoudre ce problème lorsque j'ai rencontré il.
    • "vous devriez considérer la définition de vos requêtes de média à l'aide d'une relative unités" Non, vous n'avez pas
    • You can also enforce setting the browser zoom level to 100% on page load using javascript - c'est une mauvaise accessibilité/UX et vous ne devriez jamais forcer un niveau de zoom
    InformationsquelleAutor davidcondrey
  2. 7

    Juste une courte distance en outre, pour empêcher les autres de chercher plus loin, même si la réponse est donnée ici.

    Mon zoom est fixé à 100%, et encore la question était là.
    Si vous rencontrez le même, la réponse est simple: réglez le zoom à 90% et à 100%, et le tour est joué, des points d'arrêt sur la largeur que vous voulez m'.

    • Ce doit être un chrome bug. J'étais au courant de ce qui est un problème possible et a été tapant CMD 0 pour réinitialiser le zoom à 100%. Cela n'a pas fonctionné jusqu'à ce que j'ai augmenté de zoom en utilisant CMD + pour l'obtenir à 100%, maintenant si je change le zoom CMD 0 ramène à 100%.
    • la même ici, dans firefox, j'ai dû sortir de l'adaptation de la vue et ENSUITE effectuer le zoom de réinitialisation
    InformationsquelleAutor Pieter
  3. 3

    Avez-vous des iframes (ou les auxiliaires modaux ou petites fenêtres) chargement de la même feuille CSS avec votre requête de média ? Si c'est le cas, c'est un problème de cache, et vous devez le lier le fichier CSS avec un idiot comme param :

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

    Afin de charger le fichier css dans un nouveau fichier au lieu de prendre la version en cache ... j'espère que je suis clair 🙂

    • Un autre piège avec des iFrames est de vous souvenir de votre @media requêtes sont la lecture de la container largeur de pas de la fenêtre largeur. Cela signifie que le calcul est le conteneur parent + marges, les rembourrages et les autres arbitraire des largeurs entre le conteneur et les bords des fenêtres. Cela peut être testé en regardant l'iFrame contenant du calcul de la largeur de votre développeur panneau. Facilement oublié lors de la visualisation dans google chrome, sensible mode.
    InformationsquelleAutor Pouki
  4. 2

    Un autre ajout. Après une heure de débogage, j'ai réalisé que j'avais codé plusieurs requêtes et parce que les fichiers css sont exécutés à partir du haut vers le bas, j'ai été primordial précédente requête de média logique.
    Ex:

    @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; }
};
    InformationsquelleAutor Amir
  5. 1

    Prendre un coup d'oeil à vos unités: rem, em, px.

    J'ai juste eu ce problème et c'était à cause de ma base de taille de police est de 10px et j'ai mis max_width: 102.4rem dans la requête de média, mais il est en cours d'activation autour de 1600px au lieu d'attendre 1024px.

    Il encore active à 1600px sur la mienne avec 102.4em, mais il fonctionne comme prévu lorsque j'utilise 1024px.

    Voici un article qui parle de tout je suis allusion à:

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

    J'ai raté le top voté de répondre d'abord parce que j'ai rencontré le problème à l'aide de rem pas px. Clairement, la racine du problème semble être les unités si.

    InformationsquelleAutor agm1984
  6. 1

    Je suis tombé sur ce fil après une heure de frustration, à la fin, j'ai réalisé que j'avais utilisé accidentellement min-hauteur 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 avez eu le même problème que moi face à la paume, il est tard.

    InformationsquelleAutor AdheneManx
  7. 0

    J'ai aussi eu quelques problèmes avec les media queries dans google Chrome.

    Dès que j'ai basculé de l'appareil de la barre d'outils, la mise à l'échelle a été tout simplement faux. La suite

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

    résolu ce problème.

    InformationsquelleAutor Markus Hein