Tun Sie etwas, wenn die Bildschirmbreite weniger als 960 Pixel beträgt

Wie kann ich jQuery dazu bringen, etwas zu tun, wenn meine Bildschirmbreite weniger als 960 Pixel beträgt? Der folgende Code löst immer die 2. Warnung aus, unabhängig von meiner Fenstergröße:

if (screen.width < 960) {
    alert('Less than 960');
}
else {

    alert('More than 960');
}

Verwenden Sie jQuery, um die Breite des Fensters zu ermitteln.

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

Möglicherweise möchten Sie es mit einem Größenänderungsereignis kombinieren:

 $(window).resize(function() {
  if ($(window).width() < 960) {
     alert('Less than 960');
  }
 else {
    alert('More than 960');
 }
});

Für RJ:

var eventFired = 0;

if ($(window).width() < 960) {
    alert('Less than 960');

}
else {
    alert('More than 960');
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired) {
        if ($(window).width() < 960) {
            alert('Less than 960 resize');
        } else {
            alert('More than 960 resize');
        }
    }
});

Ich habe http://api.jquery.com/off/ ohne Erfolg ausprobiert, also habe ich mich für die eventFired-Flagge entschieden.

Ich empfehle, jQuery für solche Dinge nicht zu verwenden und fortzufahren window.innerWidth:

if (window.innerWidth < 960) {
    doSomething();
}

Sie können auch eine Medienabfrage mit Javascript verwenden.

const mq = window.matchMedia( "(min-width: 960px)" );

if (mq.matches) {
       alert("window width >= 960px");
} else {
     alert("window width < 960px");
}

Ich würde vorschlagen (jQuery benötigt):

/*
 * windowSize
 * call this function to get windowSize any time
 */
function windowSize() {
  windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
  windowWidth = window.innerWidth ? window.innerWidth : $(window).width();

}

//Init Function of init it wherever you like...
windowSize();

// For example, get window size on window resize
$(window).resize(function() {
  windowSize();
  console.log('width is :', windowWidth, 'Height is :', windowHeight);
  if (windowWidth < 768) {
    console.log('width is under 768px !');
  }
});

In CodePen hinzugefügt: http://codepen.io/moabi/pen/QNRqpY?editors=0011

Dann können Sie einfach die Fensterbreite mit var: windowWidth und Height mit: windowHeight ermitteln

Andernfalls erhalten Sie eine js-Bibliothek: http://wicky.nillia.ms/enquire.js/

// Adds and removes body class depending on screen width.
function screenClass() {
    if($(window).innerWidth() > 960) {
        $('body').addClass('big-screen').removeClass('small-screen');
    } else {
        $('body').addClass('small-screen').removeClass('big-screen');
    }
}

// Fire.
screenClass();

// And recheck when window gets resized.
$(window).bind('resize',function(){
    screenClass();
});

verwenden

$(window).width()

oder

$(document).width()

oder

$('body').width()

Ich weiß, dass ich zu spät bin, um darauf zu antworten, aber ich hoffe, es hilft jedem, der ein ähnliches Problem hat. Es funktioniert auch, wenn die Seite aus irgendeinem Grund aktualisiert wird.

$(document).ready(function(){

if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }

$(window).resize(function() {
    if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }
    else{
        $("#up").show();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }
    else{
        $("#up").show();
    }

});});

Versuchen Sie diesen Code

if ($(window).width() < 960) {
 alert('width is less than 960px');
}
else {
 alert('More than 960');
}

   if ($(window).width() < 960) {
     alert('width is less than 960px');
    }
    else {
     alert('More than 960');
    }

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

Nein, nichts davon wird funktionieren. Was du brauchst ist das !!!

Versuche dies:

if (screen.width <= 960) {
  alert('Less than 960');
} else if (screen.width >960) {
  alert('More than 960');
}