1

I'm trying to create a dashboard that is primarily used for static display on the client's large monitors/tvs.

The long short is that I want to apply css styling - specifically a snap-scroll feature on 'fullscreen' and 'maximized' displays, but disable it at all other times.

For fullscreen, this is simple:

@media all and (display-mode: fullscreen){}

However figuring out how to detect if the browser has been maximized, or at the very least, stretched to the full height of the screen seems to be impossible.

Mozilla has depricated device-height which I was thinking could be used in conjunction with the window.screen.availHeight in JS to calculate the maximum viewing size, inferring that it has been maximized.

nicholowen
  • 13
  • 2
  • 2
    I’m not in front of a PC to check, but I believe comparing the window.outerWidth with the screen.width (and same for height) would tell you if the browser window is maximized or not. I.e if the outerWidth is the same as the screen.width (and height) it would be maximized. – Brandon Jul 05 '23 at 02:27
  • 1
    Does this answer your question? [Detect browser window "Maximized" / "Minimized "with JavaScript](https://stackoverflow.com/questions/3371973/detect-browser-window-maximized-minimized-with-javascript) – A-Tech Jul 05 '23 at 07:09

1 Answers1

0
if(window.outerWidth === window.innerWidth && window.outerHeight === window.innerHeight){
     console.log("User has maximized their screen!");
}else{
    console.log("User has not maximized their screen!");
}

The outer-width and outer-height are the exterior of the browser window's size. The inner-width and inner-height are the same in but for the interior part of the browser window, so if the browser window's size is the same as what is being displayed (Screen = Webpage) then the user has maximized the window. More info about window.outer/inner-widths/heights on Window innerwidth (Javascript functions for webpage size) and Layout viewport (Different aspects of the window size). I hope this helps :)

Monke
  • 51
  • 6