JS oder jQuery oder Fenster vergrößern, verkleinern oder, wenn die Fensterbreite weniger als npx

Wie kann ich erkennen, wenn ein user die Größe des browser-Fensters?

Ich bin auf der Suche nach einem Skript, das tut somenthing, wenn der Benutzer die Fenstergröße ändert, oder wenn das Fenster in der Breite ist weniger als, zum Beispiel, 900px.

  • Sie sollten wahrscheinlich verwenden Sie media queries statt.
  • verwenden Sie js wenn Sie brauchen, um die Unterstützung für ältere Browser
InformationsquelleAutor itsme | 2012-05-17
  1. 14

    Meh, können Sie jQuery verwenden, aber...

    Abonnieren Sie das Fenster resize-Ereignis wie diesem:

    $(window).on("resize", function(event){
  console.log( $(this).width() );
});

    Seien Sie vorsichtig mit dieser, da eine if-Anweisung code, der ausgeführt wird, wenn die Breite weniger als n würde der code ausgeführt eine lächerliche Anzahl von Zeiten, während Sie die Größe eines Fensters ändern, die erfüllt diese Bedingungen. Besser noch, einige Fahnen oder Klassen hinzufügen, um das Dokument, und stellen Sie diese Teile von Ihrem Zustand als gut.

    CSS Media Queries ist , Wo Es Bei!

    Aber, was du fragst klingt, wäre es am sinnvollsten gelöst werden CSS Media Queries. Zum Beispiel, wenn wir wollten, ändern Sie die hintergrund-Farbe, wenn das Fenster kleiner als 900px:

    @media screen and (max-width: 900px) {
  body {
    background: #ccc;
  }
}

    Es gibt sogar eine große polyfill für ältere version von IE: https://github.com/scottjehl/Respond

    • Ich bin mir nicht sicher, wenn dies ist off-topic, aber ein use-case habe ich für die Verwendung von JS anstelle von CSS-media-query für eine responsive Ansicht ist, schalten sich die anzeigen-Vorlage verwendet wird (in meinem Beispiel von durandal.js / knockout.js). Ich fand, dass die Breite() funktioniert, aber auch änderungen, wenn Sie Zoomen. Noch nicht sicher, wie Sie die tatsächliche Breite in diesem Fall (in meinen Augen sollte es nicht ändern beim Zoomen).
    InformationsquelleAutor Sampson
  2. 8

    jQuery: 

    $(window).resize(function() {
    //do something

    var width = $(document).width();
    if (width < 900) {
       //do something else
    }
});
    • Wie bereits in der gewählten Antwort hier, Sie wollen nicht die Funktion, um das Feuer ein paar mal, während die Größe des Fensters. Ich empfehle, mit einer debounce-Funktion zu verhindern. Siehe davidwalsh.name/javascript-debounce-Funktion
    InformationsquelleAutor Silkster
  3. 3
    $(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
  //Do stuff
});
    InformationsquelleAutor Kvam
  4. 3

    Laut, was Sie brauchen, könnte dies handhaben wenn windows-Größe ist kleiner als 900px: 

     $(window).on("resize", function(event){
      console.log('User is using resize!');
      var w = $(this).width();
      if(w < 900)
        console.log('Your window is ' + w + 'px (less than 900px)');
 });​
    InformationsquelleAutor Oscar
  5. 3

    Können Sie $(window).resize() wie folgt

    $(window).resize(function() {
     if($(this).width() < 900)
       //do whatever you want
  });

    Hier ist die Dokumentation für $.Größe

    InformationsquelleAutor Prasenjit Kumar Nag
Schreibe einen Kommentar