É bem simples, portanto não tem muito o que dizer sobre, então podemos ir quase direto ao ponto assim como eu gosto.
Em primeiro lugar, precisa do envento DOMContentLoaded
.
Depois adicionamos o window.innerWidth
ao elemento para exibir a largura da janela logo que abrir a página.
document.addEventListener('DOMContentLoaded', function() {
let screenWidth = document.querySelector("#screen_width");
screenWidth.innerHTML = window.innerWidth;
window.addEventListener('resize', function() {
var width = window.innerWidth;
screenWidth.innerHTML = window.innerWidth;
});
}, false);
Depois novamente adicionamos o window.innerWidth
ao elemento com evento resize
para exibir a largura da janela quando redimensionada, substituindo a largura inicial.
"Mais caso só queira exibir a largura quando redimensionar a janela, é só excluir a 3ª linha do código"
E, claro não podemos esquecer de adicionar o elemento HTML com o id
que no caso do exemplo é #screen_width
.
<div id="screen_width"></div>
Comente no