Exemple (cette fenêtre)
This window size:
Width: px
Height: px
Introduction
Avoir accès aux dimensions de la fenêtre en temps réel peut être bien pratique pour rendre les animations JavaScript responsive par exemple. Voici un petit script qui nous permet de récupérer ces informations.
Comme souvent, un exemple vaut toutes les explications.
Script
Peut être inclus sous cette forme directement dans l’html, dans un fichier externe ou même sous forme de bloc html dans l’éditeur wordpress.
Le script récupère les dimensions de la fenêtre au moment de son chargement, puis à chaque redimensionnement.
HTML
<div class="sticker wrapimage">
<h5><span> This window size:</span></h5>
<div class="window-dimensions-stats">
<h6><span>Width: <span class="width"></span> px</span></p><p>
</h6><h6>
<span>Height: <span class="height"></span> px</span></h6>
</div>
</div>
<script>
getWindowSize();
window.addEventListener('resize', getWindowSize);
function getWindowSize(){
document.querySelector('.width').innerText = document.documentElement.clientWidth;
document.querySelector('.height').innerText = document.documentElement.clientHeight;
}
</script>