检测浏览器窗口使用Javascript最大化/最小化 [英] Detect browser window Maximized/Minimized with Javascript

问题描述

当用户点击浏览器的Maximized / Restore Down或Minimized按钮时，有没有办法用javascript跟踪这些事件？是否有任何适当的活动或财产可供使用？

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

有人可以帮助我吗？我不介意javascript或jquery。

提前致谢。

解决方案

听起来你想要的是一个在调整浏览器大小时调整大小但只有最大宽度的布局。

如果是这种情况你可以在CSS或JavaScript中完成。

想象你的内容在以下元素中：

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

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

  .container {
 max-width：1200px; 
宽度：100％; 
} 
  

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

  .container {
 width：expression（document.body。 clientWidth> 1200？1200px：100％）; / * IE6 * / 
} 
  

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

  $（window）.bind（'resize'，function（）{
 //调整$（'。容器'）。width（）基于$（window）.width（）
}）; 
  

您最初可以使用

<$来触发该逻辑p $ p> $（窗口）.trigger（ '调整'）;


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?

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.

Thanks in advance.

解决方案

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.

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:

.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:

.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:

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

You could initially trigger that logic using

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

这篇关于检测浏览器窗口使用Javascript最大化/最小化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！