Работоспособность кода расчета размера видимой части экрана без обновления страницы

В процессе вёрстки сталкиваюсь с необходимостью знать размер видимой части экрана. Для этого я добавляю следующий код:
var html = document.documentElement; var debugging_block = document.getElementById('debugging'); debugging_info = "Размер видимой области: " + html.clientWidth + "х" + html.clientHeight; debugging_block.innerHTML = debugging_info;

Как сделать так, чтобы данный код работал без обновления страницы, аналогично media query в CSS?

Ответ

обернуть код js в window.onresize = function() {} - но тогда он работает только после изменения окна
Создайте отдельную функцию с этим кодом.
function Foo() { var html = document.documentElement; var debugging_block = document.getElementById('debugging'); debugging_info = "Размер видимой области: " + html.clientWidth + "х" + html.clientHeight; debugging_block.innerHTML = debugging_info; }
Затем используйте её в качестве обработчика двух событий
window.onload = Foo; window.onresize = Foo;
Тогда, будет работать не только при изменении размера, но и сразу при загрузке.