Fai qualcosa se la larghezza dello schermo è inferiore a 960 px

Question

Come faccio a fare jQuery qualcosa se la mia larghezza dello schermo è inferiore a 960 pixel? Il codice di seguito sempre spara il 2 ° avviso, indipendentemente dalla mia dimensione della finestra:

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

    alert('More than 960'); 
} 

Answer 1

utilizzare jQuery per ottenere la larghezza della finestra.

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

Answer 2

uso

$(window).width() 

o

$(document).width() 

o

$('body').width() 

Answer 3

Si potrebbe desiderare di combinarlo con un evento di ridimensionamento:

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

Per R.J .:

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

ho cercato http://api.jquery.com/off/ senza successo così sono andato con la bandiera eventFired.

Answer 4

no, non funzionerà. Quello che vi serve è this!!!

Prova questa:

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

Answer 5

Vorrei suggerire (jQuery necessario):

/* 
* 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 !'); 
    } 
}); 

Aggiunto in CodePen: http://codepen.io/moabi/pen/QNRqpY?editors=0011

allora si può ottenere facilmente la finestra di larghezza con var: windowWidth e Altezza con: windowHeight

in caso contrario, ottenere una libreria js: http://wicky.nillia.ms/enquire.js/

Answer 6

// 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(); 
}); 

Answer 7

So di essere in ritardo per rispondere a questo, ma spero che sia di qualche aiuto a tutti coloro che hanno problemi simili. Funziona anche quando la pagina si aggiorna per qualsiasi motivo.

$(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(); 
    } 

});}); 

Answer 8

provare questo codice

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>

Answer 9

È inoltre possibile utilizzare una media query con javascript.

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

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