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

#javascript #html #css

В процессе вёрстки сталкиваюсь с необходимостью знать размер видимой части экрана.
Для этого я добавляю следующий код: 



var html = document.documentElement;
var debugging_block = document.getElementById('debugging');
debugging_info = "Размер видимой области: " + html.clientWidth + "х" + html.clientHeight;
debugging_block.innerHTML = debugging_info;





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

Ответы

Ответ 1

обернуть код 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;


Тогда, будет работать не только при изменении размера, но и сразу при загрузке.