在调整页面大小时更新 window 个维度

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，我想知道是否有一种方法可以在我调整 window 大小时自动刷新这些值，而无需手动按 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

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

Answer 2

你也应该调用调整大小的函数，

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);

在调整页面大小时更新 window 个维度

Updating window dimensions on page resize

javascript

jquery

document

window

document-body