javascript - 在页面调整大小时更新窗口尺寸

Question

所以我正在查看 SO 并发现了这个:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

function t(){
    test.innerHTML = "x = "+x+"\ny = "+y;
}

window.onload = t;
window.onresize = t;

带有 Fiddle Example ，我想知道是否有一种方法可以在我调整窗口大小时自动刷新值而无需手动按 F5。

Answer 1

您在调整大小时运行 t 函数，但您没有更新其中的 x 和 y 值。它们仅在加载时设置，因此出现了问题。更改您的逻辑，以便在函数内修改它们。试试这个:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x, y;

function t() {
    x = w.innerWidth || e.clientWidth || g.clientWidth;
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
    test.innerHTML = "x = " + x + "\ny = " + y;
}

window.onload = t;
window.onresize = t;

Updated fiddle

话虽如此，如果您需要知道窗口的大小以在特定条件下更新 UI，那么您真的应该使用 CSS 媒体查询，而不是 JS。