CSS-Medienabfragen und jQuery-Fenster .width() stimmen nicht überein

Question 1

Für eine responsive Vorlage habe ich eine Medienabfrage in meinem CSS:

@media screen and (max-width: 960px) {
    body{
       /*  something */
       background: red;
    }
}

Und ich habe eine jQuery-Funktion zur Größenänderung erstellt, um die Breite zu protokollieren:

$(window).resize( function() {
    console.log( $(window).width() );
    console.log( $(document).width() ); /* same result */
    /* something for my js navigation */
}

Und es gibt einen Unterschied zwischen CSS-Erkennung und JS-Ergebnis, ich habe dieses Meta:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>

Ich nehme an, es liegt an der Bildlaufleiste (15 px). Wie kann ich das besser machen?

Question 2

Sie haben Recht mit der Bildlaufleiste, da das CSS die Gerätebreite verwendet, das JS jedoch die Dokumentbreite.

Was Sie tun müssen, ist die Viewport-Breite in Ihrem JS-Code zu messen, anstatt die jQuery-Breitenfunktion zu verwenden.

Dieser Code stammt von http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

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

Question 3

Ich habe folgenden Code auf gefunden http://www.w3schools.com/js/js_window.asp:

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

Praktisch funktioniert es genauso wie die Antwort in @Michael Birds Antwort, aber es ist einfacher zu lesen.

Bearbeiten: Ich suchte nach einer Methode, um genau die gleiche Breite anzugeben, wie sie für CSS-Medienabfragen verwendet wird. Aber das vorgeschlagene funktioniert nicht perfekt auf Safari mit Bildlaufleisten, sorry. Am Ende habe ich modernizr.js in einer zentralen Funktion verwendet und im Rest des Codes überprüfe ich nur, ob der Anzeigetyp Mobil, Tablet oder Desktop ist. Da mich die Breite nicht interessiert, funktioniert das für mich gut:

getDisplayType = function () {
  if (Modernizr.mq('(min-width: 768px)')){
    return 'desktop';
  }
  else if (Modernizr.mq('(min-width: 480px)')){
    return 'tablet'
  }
  return 'mobile';
};

Question 4

window.innerWidth ist das, was Sie brauchen.

if (window.innerWidth < 768) funktioniert für 768 Haltepunkt in CSS

Question 5

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

Fügen Sie dem Körper ein div hinzu

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

Fügen Sie Stile hinzu und ändern Sie sie, indem Sie eine bestimmte Medienabfrage eingeben

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

Überprüfen Sie dann in JS den Stil, den Sie ändern, indem Sie in die Medienabfrage eintreten

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 also jeden Stil überprüfen, der geändert wird, indem Sie eine bestimmte Medienabfrage eingeben.

Question 6

Meine Erfahrung war, dass die Breite der Medienabfrage document.body.clientWidth verfolgt. Aufgrund des Kommens und Gehens einer vertikalen Bildlaufleiste kann die Überprüfung von document, window oder viewport().width dazu führen, dass mein Javascript zu spät ausgeführt wird – nachdem sich die Medienabfrageregel geändert hat, abhängig von der Höhe des Fensters.

Durch die Überprüfung von document.body.clientWidth konnte mein Skriptcode konsistent ausgeführt werden, während die Medienabfrageregel wirksam wurde.

@media (Mindestbreite: 873px) {

//einige Regeln
}
…

if ( document.body.clientWidth >= 873) {

// etwas Code
}

Der Code von Andy Langton hat mich darauf gebracht – danke!

Question 7

Hallo, ich verwende diesen kleinen Trick, damit JS und CSS auf responsiven Seiten problemlos zusammenarbeiten:

Testen Sie die Sichtbarkeit eines Elements, das unter der Bedingung CSS @media size angezeigt wird oder nicht. Mit Bootstrap CSS teste ich die Sichtbarkeit eines versteckten xs-Klassenelements

var msg = "a message for U";

/* At window load check initial size  */
if ( $('#test-xsmall').is(':hidden')  ) {
  /* This is a CSS Xsmall situation ! */
  msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! ";
  $('.redthing-on-xsmall').addClass('redthing').html(msg);

} else {
  /* > 768px according to CSS  */
  msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
  $('.redthing-on-xsmall').removeClass('redthing').html(msg);
}


/* And again when window resize  */

$(window).on('resize', function() {
  if ($('#test-xsmall').is(':hidden')) {
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! ";
    $('.redthing-on-xsmall').addClass('redthing').html(msg);
  } else {
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
    $('.redthing-on-xsmall').removeClass('redthing').html(msg);
  }
});

@media (min-width: 768px) {
  .hidden-xs {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
.redthing-on-xsmall {
  /* need a scrollbar to show window width diff between JS and css */
  min-height: 1500px;
}
.redthing {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- the CSS managed Element that is tested by JS --> 
<!-- class hidden-xs hides on xsmall screens (bootstrap) -->

<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS  HIDDEN on @media lower than 767px</span>


<!-- the responsive element managed by Jquery  -->
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on @media max width 767px </div>

Question 8

Die CSS-Medienabfrage ist gleich window.innerWidth. CSS Media Queries berechnen auch die Bildlaufleiste.