这是我在调整窗口大小时触发的代码：
$(window).resize(function()
{
setDisplayBoardSize();
});
当我调整窗口大小并按预期运行我的功能时，它会很好。
如果我点击了最大化按钮，虽然它无法正常工作。
这是setDisplayBoardSize（）函数：
function setDisplayBoardSize()
{
var width = $(".display_container").width();
for (i=min_columns; i<=max_columns; i++)
{
if ((width > (i*(item_width + gap))) && (width < ((i+1) * (item_width + gap))) )
{
$("#display_board").css("width",(i*(item_width + gap))+ "px");
}
}
}
我认为问题在于，当单击浏览器最大化按钮时，它会激活读取的函数，然后在调整大小之前获取.display_container width ，然后将窗口调整为最大值，这意味着我的display_board是大小不正确。
如果我是对的，我怎样才能在窗口调整到最大值后获得.display_container元素的大小？
请注意我已经在Chrome和Firefox中对此进行了测试
由于
答案 0 :(得分：27)
这对我也很有用，并且不知道为什么，直到我读到你的帖子。看起来你是对的，在我按下最大值之前函数被触发了，所以为了解决这个问题我使用了litle延迟。
$(window).resize(function()
{
setTimeout(function() {
setDisplayBoardSize();
}, 100);
});
答案 1 :(得分：6)
我在响应式网站上遇到了类似的问题，除了图片幻灯片外，每个资产都会调整大小并适当移动。这只发生在IE中，它只发生在您从平板电脑断点开始，然后点击最大化按钮并输入桌面断点时。
最终解决问题的方法是使用Paul Irish的这个方便代码限制调整大小的触发器：
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// usage:
$(window).smartresize(function(){
// code that takes it easy...
});
你可以在这里看到他关于它的完整帖子（2009年）：http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
希望能帮到那里的人。
答案 2 :(得分：4)
针对建议修订的EDIT：
这是working jsFiddle 这是results only demo。
正如您所看到的，我完全重新考虑了您的原始jQuery代码。我删除了全局的所有内容以及取出功能。 .resize()需要一个函数，所以我只需要在一个函数中执行所有操作，然后立即调用.resize()在初始页面加载时调用它。
我做的另一个改变是向后递增你的for循环，从你允许的最宽可能宽度（5）开始，一直向下到你允许的最小宽度尺寸（2）。
此外，在for循环内部，我创建了j和k变量，以便更轻松地阅读这些条件。
主要变化是if语句。如果我们进行max_column迭代并且容器的宽度更宽k，我们想要将板的宽度设置为k并跳出for循环，否则我们会评估原始的if语句有，否则如果我们在min_column迭代上并且容器的宽度小于j，我们希望将板的宽度设置为j。
我在Chrome中对此进行了测试，效果很好。我希望这会对你有所帮助。
$(document).ready(function()
{
$(window).resize(function()
{
var item_width = 200,
item_height = 300,
gap = 20,
min_columns = 2,
max_columns = 5,
min_width = min_columns * (item_width + gap),
max_width = max_columns * (item_width + gap),
container_width = $(".display_container").width(),
$display_board = $("#display_board"),
$display_board_ol_li = $display_board.find("ol > li");
//console.log("container width: " + container_width);
for (var i = max_columns; i >= min_columns; i--)
{
var j = i * (item_width + gap),
k = (i+1) * (item_width + gap);
//console.log("j: " + j);
//console.log("k: " + k);
//console.log("display_board width (before): " + $display_board.css("width"));
if (i === max_columns && container_width > k)
{
$display_board.css("width", max_width + "px");
//console.log("display_board width (after): " + $display_board.css("width"));
break;
}
else if (container_width > j && container_width < k)
{
$display_board.css("width", j + "px");
//console.log("display_board width (after): " + $display_board.css("width"));
break;
}
else if (i === min_columns && container_width < j)
{
$display_board.css("width", min_width + "px");
//console.log("display_board width (after): " + $display_board.css("width"));
}
}
$display_board_ol_li.css({
"width" : item_width + "px",
"height": item_height + "px",
"margin": gap/2 + "px"
});
}).resize();
});
答案 3 :(得分：1)
某些浏览器（如ie和opera）会触发此事件但有一些限制，此插件可以解决此问题：
答案 4 :(得分：1)
var window_width_check_big = false, // flag true if window bigger than my_width
window_width_check_small = false, // flag true if window smaller than my_width
my_width = 1221; // Change to your width
function get_window_size() {
if(window.innerWidth > my_width) {
window_width_check_big = true;
}
if(window.innerWidth < my_width) {
window_width_check_small = true;
}
}
get_window_size();
$(window).resize(function() {
if(window.innerWidth > my_width) {
window_width_check_big = true;
}
if(window.innerWidth < my_width) {
window_width_check_small = true;
}
if( window_width_check_small && window_width_check_big ) {
window_width_check_big = false;
window_width_check_small = false;
get_window_size();
// Start function that you need
}
});
答案 5 :(得分：0)
以下代码适用于Chrome和IE11： （javascript和jQuery）。
var mResizeTimer;
function setWindowResizeEndEvent() {
$(window).on('resize', setTimerForResizeEnd);
}
function setTimerForResizeEnd() {
clearTimeout(mResizeTimer);
mResizeTimer = setTimeout(onResizeEnd, 100);
}
function onResizeEnd() {
$(window).off('resize', setTimerForResizeEnd);
$(window).resize();
setWindowResizeEndEvent();
}
说明：我正在触发本机window.resize事件， 调整大小结束后。 在最大化窗口结束后重新触发resize事件。
答案 6 :(得分：0)
以下代码适用于Chrome和IE11： （javascript和jQuery）。
function setWindowResizeEndEvent() {
$(window).on('resize', setTimerForResizeEnd);
}
var mResizeTimer;
function setTimerForResizeEnd() {
clearTimeout(mResizeTimer);
mResizeTimer = setTimeout(onResizeEnd, 100);
}
function onResizeEnd() {
$(window).off('resize', setTimerForResizeEnd);
$(window).resize();
setWindowResizeEndEvent();
}
说明：我正在触发本机window.resize事件， 调整大小结束后。 在最大化窗口结束后重新触发resize事件。