'Detect browser window "Maximized" / "Minimized "with JavaScript

When the user clicks the "Maximized"/"Restore" or "Minimized" buttons of the browser window, is there a way to keep track of these events with JavaScript? Are there any appropriate event or property to use?

I want that when the user clicks the "Maximized" button at the top-right of the window, the webpage should stretch to a specific width and when the browser is in the resizable mode, the webpage is resizable.

Please can someone help me in this? I don't mind either JavaScript or jQuery.

Thanks in advance.

javascript maximize-window

Solution 1:^[1]

As far as I know, there isn't a sure fire way to detect if a browser window is minimized, but if you want to detect for the maximized state, try:

function CheckWindow() {

  var A = screen.availWidth;
  var AA = window.outerWidth;

  var B = screen.availHeight;
  var BB = window.outerHeight;
  
  if (A == AA && B == BB) {
  
    // Window is maximized

  }
   
  else {
   
    // Window is not maximized or in full screen
    
   }

}

<body onresize = "CheckWindow();" onload = "CheckWindow();">

This takes into consideration the browser toolbar, and works for me in Chrome and Edge on my PC. I have not tried it in the other browsers or on mobile devices. Hope it helps.

Solution 2:^[2]

Nowadays, it is relatively easy to do in modern browsers such as Edge, Chrome and Opera. IE and Firefox need more cumbersome workarounds. FF also can't show minimized state.

Feel free to check it in your browser via snippet below. Compatibility is limited by its support of window.outerWidth and window.screenX functions (IE9+, Opera 12, Chrome 1), earlier browsers still can handle it, but it takes major work giving minor usability.

The check is intentionally performed in timed-out onCheck() function, 3 seconds after the button is clicked. This allows you to click the button, minimize browser, and then restore it to see the result. This works at any zoom level. Note that in fullscreen mode it shows normal state. If your device/OS supports split screen (Windows 7+ etc), we can check it as well (little bonus). Please kindly test it in your browser, and leave some comments below.

function onCheck() {
  if (isMaximized()) window.alert('MAXIMIZED');
  else if (isMinimized()) window.alert('MINIMIZED');
  else if (isSplitScreen()) window.alert('SPLIT SCREEN');
  else window.alert('NORMAL');
}

function isMaximized() {
  return (window.screenX === 0) && (window.screenY === 0) &&
  (window.outerWidth === window.screen.availWidth) &&
  (window.outerHeight === window.screen.availHeight);
}

function isMinimized() {
  return (window.screenX < -window.screen.availWidth) &&
  (window.screenY < -window.screen.availHeight);
}

function isSplitScreen() {
  return (window.screenY === 0) &&
  ((window.screenX === 0) || (window.screenX === window.outerWidth)) &&
  (window.outerWidth === window.screen.availWidth / 2) &&
  (window.outerHeight === window.screen.availHeight);
}

<button onclick="window.setTimeout(onCheck,3000)">Check</button>
<p>Click the button and minimize, maximize or split (Win7+) the window.<br>
The result pops up in 3 seconds.</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Detect browser window "Maximized" / "Minimized "with JavaScript

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]