it-swarm.com.de

$ (window) .width () stimmt nicht mit der Medienabfrage überein

Ich benutze Twitter Bootstrap für ein Projekt. Neben den Standard-Bootstrap-Styles habe ich auch einige meiner eigenen hinzugefügt

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

Ich verwende auch jQuery, um die Reihenfolge bestimmter Elemente auf der Seite zu ändern, wenn die Breite des Viewports 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 von CSS berechnete Breite nicht gleich zu sein scheinen. Wenn $(window).width() 767 zurückgibt, berechnet das CSS die Breite des Darstellungsbereichs als 751, so dass sich ein 16px-Unterschied ergibt. 

Weiß jemand, was das verursacht und wie ich das Problem lösen könnte? Die Leute haben vorgeschlagen, dass die Breite der Bildlaufleiste nicht in Betracht gezogen wird und $(window).innerWidth() < 751 der richtige Weg ist. Idealerweise möchte ich jedoch eine Lösung finden, die die Breite der Bildlaufleiste berechnet und mit meiner Medienabfrage übereinstimmt (z. B. wenn beide Bedingungen den Wert 767 prüfen). Weil sicher nicht alle Browser eine Bildlaufleistenbreite von 16px haben?

170
Pattle

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

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

window.matchMedia stimmt voll und ganz mit den CSS-Medienabfragen überein und die Browserunterstützung ist recht gut: http://caniuse.com/#feat=matchmedia

AKTUALISIEREN:

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.

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

Überprüfen Sie eine CSS-Regel, dass sich die Medienabfrage ändert. Dies funktioniert garantiert immer.

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

HTML:

<body>
    ...
    <div id="mobile-indicator"></div>
</body>

Javascript:

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

CSS:

#mobile-indicator {
    display: none;
}

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

Es kann an scrollbar liegen, verwenden Sie innerWidth anstelle von 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"));
}

Sie können auch die viewport mögen 

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 dem Code Quelle 

32
Rohan Kumar

ja, das liegt an der Bildlaufleiste. Richtige Antwortquelle: Linkbeschreibung hier eingeben

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' ] };
}
9
Rantiev

Es ist möglicherweise eine bessere Vorgehensweise, die Breite des Dokuments nicht im JS-Bereich zu erfassen, sondern eine Art Änderung, die von css @media query vorgenommen wurde. Mit dieser Methode können Sie sicher sein, dass die JQuery-Funktion und die css-Änderung gleichzeitig erfolgen.

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");
    ...
});
5
gramgram

Benutzen 

window.innerWidth

Das hat mein Problem gelöst

4
user4451021

Vor kurzem stand ich vor dem gleichen Problem - auch bei Bootstrap 3.

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

Die beste Lösung, die ich mir ausgedacht habe - und speziell auf BS3 zugeschnitten ist - 
soll die Breite eines .container-Elements prüfen.

Da Sie wahrscheinlich wissen, wie das .container-Element funktioniert, 
Dies ist das einzige Element, das Ihnen die aktuelle Breite gibt, die von BS-CSS-Regeln festgelegt wird.

So geht es ungefähr so

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");
3
user3041539

Hier ist eine Alternative zu den zuvor genannten Methoden, bei denen etwas über CSS geändert und über Javascript gelesen werden muss. Diese Methode benötigt weder window.matchMedia noch Modernizr. Es benötigt auch kein zusätzliches HTML-Element. Es funktioniert, indem ein HTML-Pseudoelement verwendet wird, um Informationen zum Haltepunkt zu "speichern":

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 dazu jedes beliebige HTML-Element verwenden. Sie können einen beliebigen String oder eine beliebige Nummer in die content des Pseudoelements einfügen. Muss nicht "mobil" sein und so weiter.

Nun können wir diese Informationen auf folgende Weise aus Javascript 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 Haltepunktinformationen korrekt sind, da sie direkt aus CSS stammen und wir uns nicht mit der richtigen Bildschirmbreite über Javascript beschäftigen müssen.

3
dschenk

Javascript bietet mehr als eine Methode zum Überprüfen der Breite des Ansichtsfensters. Wie Sie bemerkt haben, enthält innerWidth nicht die Breite der Symbolleiste. Die Breite der Symbolleisten ist je nach System unterschiedlich. Es gibt auch die Option outerWidth, die die Breite der Symbolleiste einschließt. Die Mozilla Javascript API Zustände:

Window.outerWidth ermittelt die Breite der Außenseite des Browserfensters . Es repräsentiert die Breite des gesamten Browserfensters einschließlich der Seitenleiste (falls erweitert), Fensterrahmen und Fensteranpassung der Rahmen/Ziehpunkte.

Der Zustand 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 von älteren mobilen Browsern nicht gut unterstützt , obwohl sie von den wichtigsten Desktop-Browsern und den meisten neueren Smartphone-Browsern unterstützt wird.

Wie ausi hervorgehoben, wäre matchMedia eine gute Wahl, da CSS besser standardisiert ist (matchMedia verwendet JS, um die von CSS erkannten Viewport-Werte zu lesen). Aber auch bei anerkannten Standards gibt es noch verzögerte Browser, die diese ignorieren (IE <10 in diesem Fall, was MatchMedia zumindest bis zum Tod von XP nicht sehr nützlich macht).

Wenn Sie in summary nur für Desktop-Browser und neuere mobile Browser entwickeln, sollte outerWidth Ihnen das geben, wonach Sie suchen, mit einige Vorbehalte .

2
fzzylogic

Hier ist ein weniger aufwendiger Trick, um sich mit Medienfragen zu beschäftigen. Die Browserübergreifende Unterstützung ist ein wenig einschränkend, da mobile IE nicht unterstützt wird.

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

Weitere Informationen finden Sie in der Mozilla-Dokumentation .

1
user2128205

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

Füge dem Körper ein div hinzu

<body>
    ...
    <div class='check-media'></div>
    ...
</body>

Fügen Sie einen Stil hinzu und ändern Sie ihn, indem Sie eine bestimmte Medienabfrage eingeben

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

Dann im JS-Prüfstil, den Sie durch Eingabe der Medienabfrage ändern

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.

0

Die beste Cross-Browser-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.

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

Note Der Browser unterstützt keine Medienabfragen (z. B. alter IE). Mq gibt immer "false" zurück.

0
Sanjib Debnath
if(window.matchMedia('(max-width: 768px)').matches)
    {
        $(".article-item").text(function(i, text) {

            if (text.length >= 150) {
                text = text.substring(0, 250);
                var lastIndex = text.lastIndexOf(" ");     
                text = text.substring(0, lastIndex) + '...'; 
            }

            $(this).text(text);

        });

    }
0
Adam Colton