使用 JavaScript 检测浏览器窗口“最大化”/“最小化”答案

【问题标题】：Detect browser window "Maximized" / "Minimized "with JavaScript使用 JavaScript 检测浏览器窗口“最大化”/“最小化”
【发布时间】：2010-07-30 13:37:19
【问题描述】：

当用户单击浏览器窗口的“最大化”/“恢复”或“最小化”按钮时，有没有办法使用 JavaScript 跟踪这些事件？是否有任何合适的事件或属性可供使用？

我希望当用户单击窗口右上角的“最大化”按钮时，网页应拉伸到特定宽度，并且当浏览器处于可调整大小模式时，网页可调整大小。

请问有人可以帮我吗？我不介意 JavaScript 或 jQuery。

提前致谢。

【问题讨论】：

不要学究气，jQuery 是 JavaScript。
是的，我知道，但我不想写一个长句来解释 jquery 如何从 javascript 派生，并且我不介意代码应该使用 javascript 长还是使用 jquery 短，就像我现在正在做的那样......

标签： javascript maximize-window

【解决方案1】：

听起来你想要的布局是在调整浏览器大小时调整大小，但只能达到最大宽度。

如果是这种情况，您可以使用 CSS 或 JavaScript 来实现。

想象您的内容位于以下元素中：

<div class="container"> -content here- </div>

我的首选方案是使用 CSS，如下所示：

.container{
    max-width: 1200px;
    width: 100%;
}

如果您需要支持 IE6（不支持 max-width），您可以尝试在 IE6 CSS 中使用表达式：

.container{
    width:expression(document.body.clientWidth > 1200 ? "1200px" : "100%" ); /*IE6*/
}

如果你想使用 JavaScript：你可以在窗口的 resize 事件中调整元素的大小：

$(window).bind('resize', function() {
    // resize $('.container').width() based on $(window).width()
});

您最初可以使用

触发该逻辑

$(window).trigger('resize');

【讨论】：

【解决方案2】：

据我所知，没有确定的方法来检测浏览器窗口是否被最小化，但如果您想检测最大化状态，请尝试：

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
    
   }

}

&lt;body onresize = "CheckWindow();" onload = "CheckWindow();"&gt;

这考虑了浏览器工具栏，适用于我 PC 上的 Chrome 和 Edge。我没有在其他浏览器或移动设备上尝试过。希望对您有所帮助。

【讨论】：

【解决方案3】：

如今，在 Edge、Chrome 和 Opera 等现代浏览器中相对容易做到这一点。 IE 和 Firefox 需要更繁琐的解决方法。 FF 也不能显示最小化状态。

请随时通过下面的 sn-p 在浏览器中查看。兼容性受限于它对window.outerWidth 和window.screenX 函数（IE9+、Opera 12、Chrome 1）的支持，早期的浏览器仍然可以处理它，但它需要大量的工作，而可用性却很小。

检查是有意在超时的onCheck()函数中执行的，在按钮被点击后3秒。这允许您单击按钮，最小化浏览器，然后将其还原以查看结果。这适用于任何缩放级别。请注意，在全屏模式下，它显示正常状态。如果您的设备/操作系统支持分屏（Windows 7+ 等），我们也可以检查它（小红包）。请在您的浏览器中测试它，并在下面留下一些 cmets。

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>

【讨论】：