最大化和最小化按钮不会触发效果

Question

因此，我有一个javascript文件，该文件用于确定网页的布局以及使字体适合某些div。这是我的JavaScript代码：

/*
use class fittextpara to fit text in a paragraph
use class fittexthead to fit text in a paragraph
*/
var stylesheet = document.getElementById("site_structure");
var ratio;

//when the page loads, set its layout by changing address of css file
layout();
document.body.onload = function(){
    font("fittextpara" , 8);
};
//on resize, change font and layout
document.body.onresize = layout_and_font;

function layout_and_font(){
    layout();
    font("fittextpara" , 8);
}

// function to change layout
function layout(){
    //handling the layout
    ratio = window.innerWidth / window.innerHeight;

    //normal
    if(ratio <= 2 && ratio >= 1.3)
        stylesheet.setAttribute("href" , "normal.css");
    //mobile
    else if (ratio < 1.3)
        stylesheet.setAttribute("href" , "mobile.css");
    //widescreen
    else 
        stylesheet.setAttribute("href" , "widescreen.css");
}
// function to fit font: enter the class name and scale factor
function font(classname , scale_factor){
    //handling the text
    var x = document.getElementsByClassName(classname)[0];
    if(x != null){
        if (x.clientHeight <= x.clientWidth)
            x.style.fontSize = (x.clientHeight / scale_factor) + "px";
        else
            x.style.fontSize = (x.clientWidth / scale_factor) + "px";
    }
}

该代码运行良好，但在以下情况下除外：当我使用最大化/最小化按钮调整浏览器窗口的大小时，布局正在更改，但是font-size（取决于div的宽度和高度，如fonts函数所示）。我尝试将时间间隔设置为500毫秒，以延迟执行fonts函数，但仍然没有任何变化。

作为参考，我使用Mozilla Firefox作为浏览器。在我看来，当我使用最大化/最小化按钮调整浏览器窗口的大小时，代码无法检测到div的新高度/宽度。