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

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";
    }
}

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

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

标签： javascripthtmlcss