How to know if a screen is reduced or increased? [real time]

Question

I'm trying to check if users reduced or increased there screens.

I have the following function and it works fine, but it relies only on the initial screen size:

var width = $(window).width();

$(function(){

    $(window).resize(function(){

      var resizeWidth = $(this).width();

      if (resizeWidth > width) {

        console.log('increased!')
        width = width + 1;

      } else {

        console.log('reduced!')
        width = width - 1;

      }
    });
});

Is it possible to know if the screen is increased or reduced at any time and not on the initial screen size?

Thank you all!

Possible duplicate of [Get the size of the screen, current web page and browser window](http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window) — Cory Danielson, Nov 01 '16 at 22:52
`screen.height`, `screen.width` see http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window — Cory Danielson, Nov 01 '16 at 22:53

score 1 · Answer 1 · answered Nov 01 '16 at 22:58

You can use this code to check increase and decrease your window width

var windowWidth = 0;

$(window).ready(function () {
  windowWidth = $(window).width();
})

$(window).resize(function () {
  var newWindowWidth = $(window).width();
  if (windowWidth >= newWindowWidth) {
    console.log('Decrease width');
  } else {
    console.log('Increase width');
  }
  
  windowWidth = newWindowWidth;
})

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

score 1 · Accepted Answer · answered Nov 01 '16 at 22:59

The window.resize that you've set up will fire continuously . Simply store the old width each time you resize and compare it to the new width, replacing the old width with the new after the comparison.

var win = $(window); // cache the window query since we'll be using it a lot

// set initial values
var oldWindowWidth = win.width();

// each time we resize
win.on('resize', function() {
  // get the new width
  var newWindowWidth = win.width();

  // compare it to the old width
  if (newWindowWidth > oldWindowWidth) {
    console.log('increased');
  }
  else if (newWindowWidth < oldWindowWidth) {
    console.log('descreased');
  }

  // update the old width
  var oldWindowWidth = newWindowWidth;
});

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

`oldWindowWidth = newWindowWidth;`. Ho, so obvious now...Thank you! — Zeev Katz, Nov 01 '16 at 23:01

How to know if a screen is reduced or increased? [real time]

2 Answers2