Ich verwende Twitter Bootstrap für ein Projekt. Neben den Standard-Bootstrap-Stilen habe ich auch einige meiner eigenen hinzugefügt
//My styles
@media (max-width: 767px)
{
//CSS here
}
Ich verwende jQuery auch, um die Reihenfolge bestimmter Elemente auf der Seite zu ändern, wenn die Breite des Ansichtsfensters weniger als 767 Pixel beträgt.
$(document).load($(window).bind("resize", checkPosition));
function checkPosition()
{
if($(window).width() < 767)
{
$("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
}
}
Das Problem, das ich habe, ist, dass die $(window).width()
vom CSS berechnete Breite und die vom CSS berechnete Breite nicht gleich zu sein scheinen. Wenn $(window).width()
767 zurückgegeben wird, berechnet das CSS die Breite des Ansichtsfensters als 751, sodass es einen Unterschied von 16 Pixel zu geben scheint.
Weiß jemand, was dies verursacht und wie ich das Problem lösen könnte? Die Leute haben vorgeschlagen, dass die Breite der Bildlaufleiste nicht berücksichtigt wird und die Verwendung der richtige $(window).innerWidth() < 751
Weg ist. Im Idealfall möchte ich jedoch eine Lösung finden, die die Breite der Bildlaufleiste berechnet und mit meiner Medienabfrage übereinstimmt (z. B. wenn beide Bedingungen mit dem Wert 767 verglichen werden). Weil sicherlich nicht alle Browser eine Bildlaufleistenbreite von 16px haben werden?
Antworten:
Wenn Sie IE9 nicht unterstützen müssen, können Sie einfach
window.matchMedia()
( MDN-Dokumentation ) verwenden.window.matchMedia
stimmt voll und ganz mit den CSS-Medienabfragen überein und die Browserunterstützung ist recht gut: http://caniuse.com/#feat=matchmediaAKTUALISIEREN:
Wenn Sie mehr Browser unterstützen müssen, können Sie die mq-Methode von Modernizr verwenden . Sie unterstützt alle Browser, die Medienabfragen in CSS verstehen.
quelle
Modernizr.mq
nur einen booleschen Wert zurück, daher müssen Sie ihn selbst in einemonresize
Ereignishandler aufrufen .window.matchMedia
ist der empfohlene Weg, da er keinen Reflow auslöst , je nachdem, wie oft Sie die Funktion aufrufen, kann dies zu Leistungsproblemen führen. Wenn Sie Modernizr nicht direkt verwenden möchten, können Sie den Quellcode von src / mq.js und src / injizierenElementWithStyles.js kopieren .Überprüfen Sie eine CSS-Regel, die die Medienabfrage ändert. Dies funktioniert garantiert immer.
http://www.fourfront.us/blog/jquery-window-width-and-media-queries
HTML:
Javascript:
CSS:
quelle
<div id="xs-indicator" class="xs-visible">
Es kann daran liegen
scrollbar
,innerWidth
anstelle vonwidth
wie zu verwendenAuch können Sie
viewport
dergleichen bekommenÜber der Codequelle
quelle
innerWidth()
oder Sie können es wie verwenden$('body').innerWidth();
Siehe diese stackoverflow.com/questions/8339377/…window.innerWidth
stimmt nicht mit CSS-Medienabfragen in Safari 8 überein, wenn Bildlaufleisten in den OSX-Systemeinstellungen aktiviert sind.Ja, das liegt an der Bildlaufleiste. Richtige Antwortquelle: Geben Sie hier die Linkbeschreibung ein
quelle
Es ist vielleicht eine bessere Vorgehensweise, die Breite des Dokuments nicht im JS-Bereich zu erfassen, sondern eine Änderung vorzunehmen, die durch die Abfrage css @media vorgenommen wird. Mit dieser Methode können Sie sicher sein, dass die JQuery-Funktion und die CSS-Änderung gleichzeitig erfolgen.
CSS:
jquery:
quelle
Ich hatte kürzlich das gleiche Problem - auch mit Bootstrap 3.
Weder $ .width () noch $ .innerWidth () funktionieren für Sie.
Die beste Lösung, die ich gefunden habe - und die speziell auf BS3 zugeschnitten ist -
ist die Überprüfung der Breite eines
.container
Elements.Da Sie wahrscheinlich wissen, wie das
.container
Element funktioniert, istes das einzige Element, das Ihnen die aktuelle Breite gibt, die durch BS-CSS-Regeln festgelegt wurde.
Also geht es so etwas wie
quelle
Verwenden
Dies löste mein Problem
quelle
Hier ist eine Alternative zu den zuvor erwähnten Methoden, bei denen etwas über CSS geändert und über Javascript gelesen werden muss. Diese Methode benötigt
window.matchMedia
oder Modernizr nicht. Es benötigt auch kein zusätzliches HTML-Element. Es funktioniert mithilfe eines HTML-Pseudoelements, um Haltepunktinformationen zu speichern:Ich habe
body
als Beispiel verwendet, Sie können dafür jedes HTML-Element verwenden. Sie können dem Pseudoelement eine beliebige Zeichenfolge oder Zahl hinzufügencontent
. Muss nicht "mobil" sein und so weiter.Jetzt können wir diese Informationen aus Javascript folgendermaßen lesen:
Auf diese Weise sind wir immer sicher, dass die Haltepunktinformationen korrekt sind, da sie direkt aus CSS stammen und wir uns nicht die Mühe machen müssen, die richtige Bildschirmbreite über Javascript zu erhalten.
quelle
querySelector()
odergetPropertyValue()
. Sie können auch in Regex nach einem einfachen Anführungszeichen suchen (da es nicht konsistent ist). Dies :window.getComputedStyle(document.body, ':after').content.replace(/"|'/g, '')
. Und um das etwas billiger zu machen, können Sie es._debounce()
mit ~ 100 ms Wartezeit in Unterstrich / Lodash einwickeln. Durch das Anhängen von Attributen an <html> wird die Ausgabe für andere Dinge verfügbar, z. B. für Tooltip-Deaktivierungsklauseln, die nach Rohflags / Daten außerhalb von vars suchen. Beispiel: gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1Javascript bietet mehr als eine Methode zum Überprüfen der Breite des Ansichtsfensters. Wie Sie bemerkt haben, enthält innerWidth die Symbolleistenbreite nicht, und die Symbolleistenbreiten unterscheiden sich systemübergreifend. Es gibt auch die Option OuterWidth , die die Breite der Symbolleiste enthält. Die Mozilla Javascript API gibt Folgendes an:
Der Status von Javascript ist so, dass man sich nicht in jedem Browser auf jeder Plattform auf eine bestimmte Bedeutung für OuterWidth verlassen kann.
outerWidth
wird in älteren mobilen Browsern nicht gut unterstützt , obwohl es in allen wichtigen Desktop-Browsern und den meisten neueren Smartphone-Browsern unterstützt wird.Wie ausi betonte,
matchMedia
wäre dies eine gute Wahl, da CSS besser standardisiert ist (matchMedia verwendet JS, um die von CSS erkannten Ansichtsfensterwerte zu lesen). Aber selbst bei akzeptierten Standards gibt es immer noch verzögerte Browser, die sie ignorieren (IE <10 in diesem Fall, was matchMedia zumindest bis zum Tod von XP nicht sehr nützlich macht).In Zusammenfassung , wenn Sie sind für Desktop - Browser und neue mobile Browser entwickeln, sollte outer Sie, was Sie suchen, mit einigen Einschränkungen .
quelle
Hier ist ein weniger komplizierter Trick, um mit Medienanfragen umzugehen. Die browserübergreifende Unterstützung ist etwas einschränkend, da sie den mobilen IE nicht unterstützt.
Weitere Informationen finden Sie in der Mozilla-Dokumentation .
quelle
Versuche dies
quelle
Problemumgehung, die immer funktioniert und mit CSS-Medienabfragen synchronisiert wird.
Fügen Sie dem Körper ein Div hinzu
Fügen Sie einen Stil hinzu und ändern Sie ihn, indem Sie eine bestimmte Medienabfrage eingeben
Überprüfen Sie dann in JS den Stil, den Sie ändern, indem Sie eine Medienabfrage eingeben
Im Allgemeinen können Sie also jeden Stil überprüfen, der geändert wird, indem Sie eine bestimmte Medienabfrage eingeben.
quelle
Die beste browserübergreifende Lösung ist die Verwendung von Modernizr.mq
Link: https://modernizr.com/docs/#mq
Mit Modernizr.mq können Sie programmgesteuert prüfen, ob der aktuelle Status des Browserfensters mit einer Medienabfrage übereinstimmt.
Hinweis Der Browser unterstützt keine Medienabfragen (z. B. alter IE). Mq gibt immer false zurück.
quelle
quelle
Was ich mache ;
und rufen Sie danach irgendwo eine aWidth-Variable auf.
Sie müssen getWidth () in Ihren Dokumentkörper einfügen, um sicherzustellen, dass die Breite der Bildlaufleiste gezählt wird. Andernfalls wird die Breite der Bildlaufleiste des Browsers von getWidth () abgezogen.
quelle
Implementierung Slick Slider und Anzeige unterschiedlicher Anzahl von Folien im Block abhängig von der Auflösung (jQuery)
quelle
Versuche dies
Für weitere Informationen klicken Sie hier
quelle