dimensions Mise à jour de la fenêtre à la page redimensionnent

Question

Je feuilletais SO et trouvé ceci:

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; 

avec un Fiddle Example, et je me demandais s'il y a un moyen de rendre les valeurs actualisées automatiquement quand je redimensionner ma fenêtre sans appuyer manuellement sur F5.

Answer 1

Vous exécutez la fonction t lors du redimensionnement, mais vous ne mettez pas à jour les valeurs x et y. Ils ne sont mis en charge, d'où le problème. Changez votre logique afin qu'ils soient modifiés dans la fonction. Essayez ceci:

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

Cela dit, si vous avez besoin de connaître la taille de la fenêtre pour mettre à jour l'interface utilisateur dans certaines conditions, alors vous devriez vraiment utiliser des requêtes de médias CSS, non JS.

Answer 2

Vous devez appeler la fonction sur Redimensionner aussi,

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