jQuery resize（）使用浏览器最大化按钮
这是我调整窗口大小时触发的代码：
$(window).resize(function() { setDisplayBoardSize(); }); 当我调整窗口大小并按预期运行我的function时，会很好。
如果我点击最大化按钮虽然它无法正常工作。
这是setDisplayBoardSize（）函数：
function setDisplayBoardSize() { var width = $(".display_container").width(); for (i=min_columns; i (i*(item_width + gap))) && (width < ((i+1) * (item_width + gap))) ) { $("#display_board").css("width",(i*(item_width + gap))+ "px"); } } }
我认为问题在于，当单击浏览器最大化按钮时，它会激活读取的函数，在resize之前获取.display_container宽度，然后将窗口调整为最大值，这意味着我的display_board大小不正确。
如果我是对的，如何在窗口调整到最大值后获得.display_container元素的大小？
请注意我已经在Chrome和Firefox中对此进行了测试
谢谢
编辑提议的修复：
这是工作的jsFiddle ，这里只是结果演示 。
如您所见，我完全重新考虑了您的原始jQuery代码。 我删除了全局的所有内容以及取出function。 .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(); });
这也是对我的迫切，并不知道为什么，直到我读你的post。 似乎你是对的，在我按下最大化之前函数被触发，所以为了解决这个问题，我使用了litle延迟。
$(window).resize(function() { setTimeout(function() { setDisplayBoardSize(); }, 100); });
我在响应式网站上遇到了类似的问题，除了图像幻灯片外，每个资产都会resize并适当移动。 这只发生在IE中，它只发生在您从平板电脑断点开始，然后点击最大化按钮并输入桌面断点时。
最后解决问题的方法是使用Paul Irish的这个方便代码限制resize的触发器：
(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... });
你可以在这里看到他关于它的完整post（从2009年开始）： http ： //www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
希望能帮到那里的人。
像ie和opera这样的浏览器触发这个事件有一些限制，这个插件可以解决这个问题：
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 } });
以下代码适用于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结束后。 在最大化窗口结束后重新触发resize事件。
以下代码适用于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结束后。 在最大化窗口结束后重新触发resize事件。