更新窗口尺寸调整

所以我一直在寻找通过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。

来源

2017-04-26 GiLA3

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

来源

2017-04-26 09:45:13

很清楚，谢谢！ :) – GiLA3

我可以问你一个快速相关的问题吗？ 'window.width'和'window.innerWidth'有什么区别？我注意到前者我不能像'* 0.9'那样做操作来调整它的大小，而后者我可以。 – GiLA3

没有'window.width'属性，所以我不确定从哪里获得。有些浏览器可能会实现它，但它当然不是标准的一部分。我建议你总是使用'innerWidth' –

请立即拨打调整大小也是功能，

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

来源

2017-04-26 09:47:16 RemyaJ

虽然此代码片段可以解决问题，[包括一个解释]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）确实有助于提高你的文章的质量。请记住，您将来会为读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性注释来挤占代码，这会降低代码和解释的可读性！ –

更新窗口尺寸调整

回答

相关问题