Ich habe eine CSS-Medienabfrage geschrieben so -
Dies funktioniert in allen Browsern mit Ausnahme von Safari 10.0.4 und niedriger. Safari scheint die Medienabfragen anders zu behandeln.
Andere Browser scheinen window.innerWidth als Darstellungsfeldbreite zu verwenden, um Medienabfragen auszulösen, aber Safari scheint document.documentElement.clientWidth als Darstellungsfeldbreite zu verwenden und löst die Medienabfragen entsprechend aus.
Ich kann einen Unterschied von 15px zwischen dem tatsächlichen und dem erwarteten Haltepunkt sehen. Ich bin auf der Suche nach einer browserübergreifenden Möglichkeit, mit diesem Problem umzugehen. Gedanken sind willkommen, danke im Voraus.
Die Fensterbreite vs tatsächliche Breite ist eigentlich ein super interessantes Thema. Snuggug hat eine wirklich ausführliche Erklärung dafür , aber kurz gesagt, es basiert darauf, wie die Bildlaufleisten in verschiedenen Browsern platziert sind.
Einige Browser überlagern die Bildlaufleiste oben des Inhalts / der Website. Andere Browser kürzen die Breite des Inhalts / der Site und haben die Bildlaufleiste next . Dies führt offensichtlich zu Diskrepanzen bei der Berechnung der Breite des Ansichtsfensters durch verschiedene Browser.
Ein mögliches Problem ist die Verwendung von em als Maßeinheit.
Es ist wichtig, daran zu denken, dass em eine Maßeinheit ist, die auf Ihrer aktuellen Schriftgröße basiert, und daher für die Interpretation durch den Browser offen ist.
Abhängig von font-family und gesamt font-size liegt 60em normalerweise im Bereich von 800px. Was bedeutet, dass Ihre Abfrage spezifischer wie folgt aussehen würde:
Wenn Sie sich nicht sicher sind, ob das Styling überschrieben wird, können Sie immer eine wichtige Regel anwenden:
%Vor% Wenn Sie nicht das !important -Tag in Ihrem CSS verwenden möchten, müssen Sie sicherstellen, dass Sie nach den beiden unten aufgeführten Szenarien Ausschau halten:
Dies bedeutet, dass wenn Sie eine Regel für Ihr .left -Element angegeben haben, diese vor Ihrer Medienabfrage und nicht nach
Das FALSCHE Layout würde folgendermaßen aussehen:
%Vor%Das KORREKTE Layout würde folgendermaßen aussehen:
%Vor%Das nächste zu beachtende Bit ist:
Verwenden Sie die gleiche Anzahl von übergeordneten Selektoren (oder mehr) in Ihrer Medienabfrage-Regel.
Die FALSCHE Reihe von Selektoren:
%Vor%Die CORRECT-Selektoren:
%Vor%Verwenden Sie px (Pixel) anstelle von em . em ist nicht festgelegt, aber es ist relativ. für verschiedene Browser unterschiedlich geparst.
%Vor%Sie müssen die Medienabfrage nach der .left-Klasse gemäß der css-Regel verwenden
Zum Beispiel
%Vor%Tags und Links css breakpoints safari media-queries