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

您也应该在调整大小时调用该函数，

var onresize = function() {
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
    test.innerHTML = "x = "+x+"\ny = "+y;
}
window.addEventListener("resize", onresize);

Answer 2

您在调整大小时正在运行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。

更新页面上的窗口尺寸调整大小

2 个答案: