在页面调整大小时更新窗口尺寸答案

【问题标题】：Updating window dimensions on page resize在页面调整大小时更新窗口尺寸
【发布时间】：2017-04-26 09:42:09
【问题描述】：

所以我正在查看 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 时自动刷新值。

【问题讨论】：

标签： javascript jquery window document document-body

【解决方案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。

【讨论】：

我可以再问你一个相关的快速问题吗？ window.width 和 window.innerWidth 有什么区别？我注意到前者我不能像*0.9 这样的操作来调整它的大小，而后者我可以。
没有window.width 属性，所以我不确定你从哪里得到它。一些浏览器可能会实现它，但它肯定不是标准的一部分。我建议你总是使用innerWidth
这不是问题，但我实际上在我的项目中使用它并且工作正常，只是无法对其进行操作

【解决方案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);

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！