watching window.innerWidth for changes in the browser resolution using $watch with javascript

Question

i am in need of knowing the current screen resolution of my clients in their browsers.

i need this information in order to do calculations.

this will be my function:

  scope.$watch('**??what,should,go,here??**', function() {
     scope.screen = (window.innerWidth / 2) - 150;
  });

as you can see i want to use a regular $watch function. my problem is that i don't know what to watch. i tried watching window.innerWidth but this doesn't worked. i supposed because this will only give a value for the first time.

i believe there is a simple solution probably.

thanks.

Answer 1

Bind to onresize, e.g.

window.addEventListener("resize", function () {
    // check width
});

Answer 2

You can use this

 window.addEventListener("resize", function () {
     // scripts
 }

But it looks like you want to style the page based on the window size, so using .clientWidth along with it I believe is what you're looking for

window.addEventListener("resize", function () {
    if (document.clientWidth < 900) {
        // scripts
     }
}

Or, assuming it is for styling purposes, you could use CSS @media queries like so

@media (max-width: 900px) and (min-width: 300px) {
    // CSS
}