检测使用 Javascript 最大化/最小化的浏览器窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3371973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect browser window Maximized/Minimized with Javascript
提问by Shaoz
When the user clicks the Maximized/Restore Down or Minimised buttons of the browser, is there a way to keep track of these events with javascript? Are there any appropriate event or property to use?
当用户单击浏览器的最大化/还原或最小化按钮时，有没有办法用 javascript 跟踪这些事件？是否有任何合适的事件或财产可供使用？
I want that when the user clicks the 'maximized' button at the top-right of the browser, 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.
请问有人可以帮我吗？我不介意 javascript 或 jquery。
Thanks in advance.
提前致谢。
采纳答案by stucampbell
It sounds like what you want is a layout that resizes when the browser is resized but only up to a maximum width.
听起来您想要的是一种在调整浏览器大小时调整大小的布局，但只能达到最大宽度。
If that's the case you can either do it in CSS or in JavaScript.
如果是这种情况，您可以使用 CSS 或 JavaScript 来完成。
Imagining that your content is in an element like:
想象你的内容在一个元素中，如：
<div class="container"> -content here- </div>
My preferred option would be to use CSS as follows:
我的首选是使用 CSS 如下：
.container{
max-width: 1200px;
width: 100%;
}
If you need to support IE6 (which doesn't support max-width) you can try using an expression in the IE6 CSS:
如果您需要支持 IE6（不支持最大宽度），您可以尝试在 IE6 CSS 中使用表达式：
.container{
width:expression(document.body.clientWidth > 1200 ? "1200px" : "100%" ); /*IE6*/
}
If you want to use JavaScript: you could just resize your elements in the window's resize event:
如果你想使用 JavaScript：你可以在窗口的 resize 事件中调整元素的大小：
$(window).bind('resize', function() {
// resize $('.container').width() based on $(window).width()
});
You could initially trigger that logic using
您最初可以使用触发该逻辑
$(window).trigger('resize');
