How to Refresh the Screen on Browser Resize

Refresh page on resize with javascript or jquery

Do it with javascript/jquery:

just javascript:

window.onresize = function(){ location.reload(); }

with jquery:

$(window).resize(function(){location.reload();});

$(window).on('resize',function(){location.reload();});

How can I refresh the screen on browser resize?

Update for anyone viewing this now. JQuery now considers bind a deprecated function.

And the way proximus' response works (at least in Opera/Chrome/Firefox) it constantly polls for resizing even if the browser is just sitting there. It appears that the resize function was called automatically when it hit location.reload(), causing it to hit an infinite loop. Here's what I pulled together that also solved the problem.

jQuery(function($){
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();

  $(window).resize(function() {
    if(windowWidth != $(window).width() || windowHeight != $(window).height()) {
      location.reload();
      return;
    }
  });
});

Refresh the page on a browser resize using JavaScript when difference is more than 100px

I'm assuming that by "when difference in browser width is more than 100px" means you're attempting to detect that the window has changed in size by more than 100px. To do this you'll need to store the original width of the window and compare against that:

var originalWidth = $(window).width();
$(window).bind('resize', function(e) {
  if (window.RT) clearTimeout(window.RT);
  window.RT = setTimeout(function() {
    if (Math.abs($(window).width() - originalWidth) > 100) {
      this.location.reload(false); /* false to get page from cache */
    }
  }, 200);
});

(This seems an odd requirement, however: refreshing the page on window resize is far from ideal UX. You may find it better to use CSS breakpoints, or scripting if necessary, to modify the page in place rather than the brute-force approach of reloading the whole thing.)

How to refresh the page between window widths 480px to 768px?

Yes, of course:

// Resize when less than 768
$(document).ready(function(){
$(window).on('resize',function(){
    if (($(window).width() > 480) && ($(window).width() < 768)) {   
      location.reload();  // refresh page 
    }
    else {  
      // Width greater than 768px for PC 
      // Or width is smaller than 480 for mobile
    }
}); 
});

Reload window on resize browser window

try this..

window.addEventListener('resize', function () { 
    "use strict";
    window.location.reload(); 
});

How to refresh a variable upon resizing the browser using Vanilla JavaScript?

You need to add this code:

window.addEventListener('resize', ()=>{
    size = carousel_images[0].clientWidth
    carousel_slide.style.transform = `translateX(${-size}px)`
})

Essentially, you need to listen window resize event, update variable and execute code again wherever that variable is used.

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

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

$(window).resize only triggered on browser refresh?

I don't think your unbinding logic is correct. To unbind a event handler in jQuery you should use

$('#menu-top-inner nav > ui > li').off('click');

Additional things:

You don't have to wrap the checkWinSize function with an anonymous function. You can simply do

$(window).on('resize', checkWinSize);

Then generally, your code is inappropriate, because you're binding yet another click event handler every time you resize the window. Let's say your window is 1920px wide. Handlers are bound on page load. Then you resize it to 1600px. Handlers are bound again. That way they'll be called twice when the event occurs. I suggest using a flag. Like this:

$(function() {
    var eventsBound = false; //the flag
    function checkWinState() {
        if ($(window).width() >= 1120 && !eventsBound) {
            eventsBound = true;
            //bind the clicks
        } else {
            eventsBound = false;
            //unbind everything
        }
    }
    //...
});