Javascript 列大小调整仅在页面刷新时起作用

Question

您好 - 我继承了一个网站，该网站有一个无法正常运行的小 javascript 脚本。我没有自己编码，并且是一个javascript n00b，所以请原谅我的无知。

站点根据窗口大小从 3 列视图切换到 1 列视图，并且有一个脚本可以使站点的一个特定部分在两个视图之间整齐地转换（通过设置列高，使它们整齐地堆叠）。我注意到，如果我在不刷新的情况下调整窗口大小，则列高无法调整。我该如何解决这个问题？

谢谢！

<script type="text/javascript">
            function adjust_col_heights() {
                if (window.innerWidth > 991) {
                    var col_1_height = document.getElementById('col-1').clientHeight;
                    var col_2_height = document.getElementById('col-2').clientHeight;
                    var col_3_height = document.getElementById('col-3').clientHeight;
                    console.log("adjusting heights from:", col_1_height, col_2_height, col_3_height);
                    var col_max_height = Math.max(Math.max(col_1_height, col_2_height), col_3_height);
                    var css_height = col_max_height + "px";
                    document.getElementById('col-1').style.height = css_height;
                    document.getElementById('col-2').style.height = css_height;
                    document.getElementById('col-3').style.height = css_height;
                    document.getElementById('poem').style.position = "absolute";
                }
                else {          
                    document.getElementById('poem').style.position = "relative";
                }
            }
            adjust_col_heights();
            window.onresize = adjust_col_heights;
        </script>

Answer 1

window.onload = function () {
        resizeElements();
        window.addEventListener('resize', resizeElements);
 }

 function resizeElements() { ... }