$ (window) .width () ist nicht dasselbe wie Medienabfrage

Ich verwende Twitter Bootstrap für ein Projekt. Neben den Standard-Bootstrap-Stilen habe ich auch eigene hinzugefügt

//My styles @media (max-width: 767px) { //CSS here } 

Ich benutze auch jQuery, um die Reihenfolge bestimmter Elemente auf der Seite zu ändern, wenn die Breite des Ansichtsfensters weniger als 767px 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 von $(window).width() berechnete Breite und die vom CSS berechnete Breite nicht gleich zu sein scheint. Wenn $(window).width() 767 zurückgibt, berechnet die CSS die Breite des Darstellungsbereichs als 751, also scheint es ein 16px zu geben.

Weiß jemand, was das verursacht und wie ich das Problem lösen könnte? Leute haben vorgeschlagen, dass die Breite der Bildlaufleiste nicht in Betracht gezogen wird und $(window).innerWidth() < 751 ist der Weg zu gehen. Im Idealfall möchte ich jedoch eine Lösung finden, die die Breite der Bildlaufleiste berechnet und mit meiner Medienabfrage konsistent ist (z. B. wenn beide Bedingungen mit dem Wert 767 übereinstimmen). Da sicherlich nicht alle Browser eine Scrollbar-Breite von 16px haben werden?

Wenn Sie IE9 nicht unterstützen müssen, können Sie einfach window.matchMedia() ( MDN-Dokumentation ) verwenden.

 function checkPosition() { if (window.matchMedia('(max-width: 767px)').matches) { //... } else { //... } } 

window.matchMedia ist vollständig konsistent mit den CSS-Medienabfragen und die Browser-Unterstützung ist ziemlich gut: http://caniuse.com/#feat=matchmedia

AKTUALISIEREN:

Wenn Sie mehrere Browser unterstützen müssen, können Sie die mq-Methode von Modernizr verwenden . Sie unterstützt alle Browser, die Medienabfragen in CSS verstehen.

 if (Modernizr.mq('(max-width: 767px)')) { //... } else { //... } 

Überprüfen Sie eine CSS-Regel, die von der Medienabfrage geändert wird. Dies funktioniert garantiert immer.

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

HTML:

  ... 

Javascript:

 function isMobileWidth() { return $('#mobile-indicator').is(':visible'); } 

CSS:

 #mobile-indicator { display: none; } @media (max-width: 767px) { #mobile-indicator { display: block; } } 

Es kann aufgrund der scrollbar , verwenden Sie innerWidth width statt width wie

 if($(window).innerWidth() < = 751) { $("#body-container .main-content").remove() .insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove() .insertAfter($("#body-container .left-sidebar")); } 

Außerdem können Sie das viewport wie erhalten

 function viewport() { var e = window, a = 'inner'; if (!('innerWidth' in window )) { a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; } 

Über Quellcode

Ja, das liegt an der Bildlaufleiste. Richtige Antwortquelle: Geben Sie hier die Linkbeschreibung ein

 function viewport() { var e = window, a = 'inner'; if (!('innerWidth' in window )) { a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; } 

Es ist vielleicht eine bessere Übung, nicht die Breite des Dokuments zu skalieren, sondern irgendeine Art von Änderung, die von css @ media query vorgenommen wurde. Mit dieser Methode können Sie sicher sein, dass die JQuery-function und die CSS-Änderung gleichzeitig ausgeführt werden.

CSS:

 #isthin { display: inline-block; content: ''; width: 1px; height: 1px; overflow: hidden; } @media only screen and (max-width: 990px) { #isthin { display: none; } } 

jQuery:

 $(window).ready(function(){ isntMobile = $('#isthin').is(":visible"); ... }); $(window).resize(function(){ isntMobile = $('#isthin').is(":visible"); ... }); 

Ich hatte in letzter Zeit das selbe Problem – auch mit Bootstrap 3.

Weder $ .width () noch $ .innerWidth () funktionieren für Sie.

Die beste Lösung, die ich entwickelt habe – und speziell auf BS3 zugeschnitten ist –
ist die Breite eines .container Elements zu überprüfen.

Wie Sie wahrscheinlich wissen, wie das .container Element funktioniert,
es ist das einzige Element, das Ihnen die aktuelle Breite geben wird, die von BS CSS-Regeln festgelegt wird.

Es geht also so etwas wie

 bsContainerWidth = $("body").find('.container').width() if (bsContainerWidth < = 768) console.log("mobile"); else if (bsContainerWidth <= 950) console.log("small"); else if (bsContainerWidth <= 1170) console.log("medium"); else console.log("large"); 

Benutzen

window.innerWidth

Das hat mein Problem getriggers

Hier ist eine Alternative zu den bereits erwähnten Methoden, die darauf abzielen, etwas über CSS zu ändern und es über Javascript zu lesen. Diese Methode benötigt window.matchMedia oder Modernizr nicht. Es benötigt auch kein zusätzliches HTML-Element. Es funktioniert mit einem HTML-Pseudo-Element zum “Speichern” von Breakpoint-Informationen:

 body:after { visibility: hidden; height: 0; font-size: 0; } @media (min-width: 20em) { body:after { content: "mobile"; } } @media (min-width: 48em) { body:after { content: "tablet"; } } @media (min-width: 64em) { body:after { content: "desktop"; } } 

Ich habe body als Beispiel verwendet, Sie können dafür jedes HTML-Element verwenden. Sie können einen beliebigen String oder eine beliebige Zahl in den content des Pseudo-Elements einfügen. Muss nicht “mobil” sein und so weiter.

Jetzt können wir diese Informationen aus Javascript auf folgende Weise lesen:

 var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,''); if (breakpoint === 'mobile') { doSomething(); } 

Auf diese Weise sind wir immer sicher, dass die Breakpoint-Informationen korrekt sind, da sie direkt von CSS kommen und wir nicht mit der richtigen Bildschirmbreite über Javascript kämpfen müssen.

JavaScript bietet mehr als eine Methode zum Überprüfen der Breite des Darstellungsbereichs. Wie Sie bereits bemerkt haben, enthält innerWidth nicht die Symbolleistenbreite und die Symbolleistenbreiten unterscheiden sich systemübergreifend. Es gibt auch die Option outerWidth , die die Symbolleistenbreite enthält. Die Mozilla Javascript API besagt:

Window.outerWidth erhält die Breite der Außenseite des Browserfensters. Er stellt die Breite des gesamten Browserfensters dar, einschließlich der Seitenleiste (falls erweitert), des Fensters und der Größenänderung von Fenstern / Griffen.

Der Zustand von Javascript ist so, dass man sich in keinem Browser auf jeder Plattform auf eine bestimmte Bedeutung von outerWidth verlassen kann.

outerWidth wird in älteren mobilen Browsern nicht gut unterstützt , obwohl es Unterstützung für große Desktop-Browser und die meisten neueren Smartphone-Browser bietet.

Wie ausi hervorgehoben wurde, wäre matchMedia eine gute Wahl, da CSS besser standardisiert ist (MatchMedia verwendet JS, um die von CSS erkannten Viewport-Werte zu lesen). Aber selbst mit akzeptierten Standards existieren immer noch verzögerte Browser, die sie ignorieren (IE <10 in diesem Fall, was dazu führt, dass matchMedia zumindest bis zum Tod von XP nicht sehr nützlich ist).

Zusammenfassend , wenn Sie nur für Desktop-Browser und neuere mobile Browser entwickeln, sollte outwardWidth Ihnen, mit einigen Vorbehalten , das geben, wonach Sie suchen.

Hier ist ein weniger komplizierter Trick, um mit Medienanfragen umzugehen. Cross-Browser-Unterstützung ist ein wenig einschränkend, da es mobile IE nicht unterstützt.

  if (window.matchMedia('(max-width: 694px)').matches) { //do desired changes } 

Weitere Informationen finden Sie in der Mozilla-Dokumentation .

Umgehung, die immer funktioniert und mit CSS-Medienabfragen synchronisiert wird.

Füge ein div zum Körper hinzu

  ... 
...

Fügen Sie Stil hinzu und ändern Sie sie, indem Sie eine spezifische Medienabfrage eingeben

 .check-media{ display:none; width:0; } @media screen and (max-width: 768px) { .check-media{ width:768px; } ... } 

Dann prüfen Sie in JS den Stil, den Sie ändern, indem Sie die Medienabfrage eingeben

 if($('.check-media').width() == 768){ console.log('You are in (max-width: 768px)'); }else{ console.log('You are out of (max-width: 768px)'); } 

Im Allgemeinen können Sie jeden Stil, der geändert wird, überprüfen, indem Sie eine bestimmte Medienabfrage eingeben.

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 überprüfen, ob der aktuelle Status des Browserfensters mit einer Medienabfrage übereinstimmt.

 var query = Modernizr.mq('(min-width: 900px)'); if (query) { // the browser window is larger than 900px } 

Hinweis Der Browser unterstützt keine Medienabfragen (zB alter IE). Mq gibt immer false zurück.

Implementierung Slick Slider und Anzeige unterschiedlicher Anzahl von Folien im Block abhängig von der Auflösung (jQuery)

  if(window.matchMedia('(max-width: 768px)').matches) { $('.view-id-hot_products .view-content').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3, dots: true, }); } if(window.matchMedia('(max-width: 1024px)').matches) { $('.view-id-hot_products .view-content').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 4, dots: true, }); } 

Versuche dies

 if (document.documentElement.clientWidth < 767) { // scripts } 

Für mehr Referenz klicken Sie hier