更新頁面上的窗口尺寸調整大小

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;

使用小提琴示例 ，我想知道是否有一種方法可以在我手動按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;

更新了小提琴

話雖如此，如果您需要知道窗口的大小以在某些條件下更新UI，那么您應該真正使用CSS媒體查詢，而不是JS。