How to refresh the page when window width less than 767px

Question

How to refresh the page once when after resized window to less than 767px ?

I tried many examples, but it does not working well.

$(document).ready(function(){

    if ($(window).width() < 767) {   

             location.reload();  // refresh page 

    }
    else {  

            // width more than 768px for PC  

    }
});

Please help~

`window.location.reload()` maybe? But wouldn't that give an infinite loop of reloads? In what browser are you testing? — putvande, Jul 15 '14 at 08:23
I'd link to this anyway: http://stackoverflow.com/questions/641857/javascript-window-resize-event — George Garchagudashvili, Jul 15 '14 at 08:52

score 3 · Accepted Answer · answered Jul 15 '14 at 08:26

3

$(document).ready(function(){
$(window).on('resize',function(){
    if ($(window).width() < 767) {   
      location.reload();  // refresh page 
    }
    else {  
      // width more than 768px for PC  
    }
}); 
});

answered Jul 15 '14 at 08:26

RGS

4,825
4
29
52

score 0 · Answer 2 · answered Jul 15 '14 at 08:41

if dont want to hit the reload to early, you could delay like so:

$(document).ready(function() {
    $(window).on("resize", function() {
        var tm;
        clearTimeout(tm);
        tm = setTimeout(function() {
            if ($(window).width() < 767) {
                location.reload();  // refresh page 
            }
            else {
                // width more than 768px for PC  
            }
        }, 100);
    });
});

How to refresh the page when window width less than 767px

2 Answers2