Écrire un article
Tea Innovation



Lorsque l'on développe un site web responsive, il est intéressant de connaître la largeur de la fenêtre du navigateur afin de repérer quand faire les changements en CSS. Ne trouvant pas de solutions probantes, j'ai décidé de créer mon propre outil en jQuery que je partage avec vous aujourd'hui.

 


Démo


Utiliser l'outil

Prérequis
- HTML niveau basique
- CSS responsive niveau basique

 


1 Si le site que vous développez n'utilise pas déjà jQuery, ajoutez cette ligne de code dans votre HTML :

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>



2 Ajoutez ce code dans votre HTML :

 

<div style="background:pink;color:#333;position:fixed;right:0;bottom:0;z-index:99999999;font:1em arial;opacity:.9" id="ld"></div><script>setInterval(function(){if($(window).height()>=$(document).height()){$('#ld').text($(document).width()+' px');}else{$('#ld').text($(document).width()+17+' px');}},150);
</script>



Pour que le code fonctionne correctement il faut que votre page HTML ait un doctype. Par exemple :

 

<!DOCTYPE html>



Ça y est, la largeur de votre navigateur s'affiche en bas à droite et évolue en temps réel si vous redimensionnez votre fenêtre ! Elle correspond bien aux valeurs de vos propriétés @media dans votre CSS :

@media (max-width: 1000px) {
    #exemple {
        padding: 15px;
    }
}



Le code a été testé sur Firefox et Chrome sous Windows 10. Si vous utilisez un autre navigateur il faudra remplacer le paramètre "17" qui est la largeur de la scrollbar.

Lorsque vous avez fini de travailler sur le site vous n'avez plus qu'à enlever le code.


Comment ça marche ?

Pour ceux qui souhaitent comprendre comment le code fonctionne.

Prérequis
- HTML niveau basique
- JS niveau basique
- jQuery niveau basique
- CSS niveau intermédiaire

 


Je crée une div appelée "largeur" :

 

<div id="largeur"></div>



J'appelle jQuery comme vu ci-dessus :

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>



Je crée un script qui renvoie la largeur de la fenêtre avec la méthode width :

<script>
    function(){
        $(document).width();
    }
</script>



Je lui fais écrire le résultat dans la div #largeur avec la méthode text :

<script>
    function(){
        $('#largeur').text(
            $(document).width(); + ' px'
        );
    }
</script>



Pour que le résultat change en temps réel lorsque je redimensionne la fenêtre, j'exécute le code toute les 150 millisecondes avec la méthode JavaScript setInterval :

<script>
    setInterval(
        function(){
            $('#largeur').text(
                $(document).width(); + ' px'
            );
        }
    ,150);
</script>



Pour que le code fonctionne lorsqu'il y a une scrollbar je détecte la présence de la scrollbar en comparant la hauteur du contenu et la hauteur de la fenêtre, puis j'ajoute les 17 pixels qui correspondent à la largeur de la scrollbar :

<script>
setInterval(
    function(){

        if($( window ).height() < $( document ).height()) {
            $('#ld').text($(document).width()+' px');
        }

        else{
            $('#ld').text($(document).width() + 17 +' px');
        }
    }
,150);
</script>



Une fois minifié avec un peu de CSS :

 

<div style="background:pink;color:#333;position:fixed;right:0;bottom:0;z-index:99999999;font:1em arial;opacity:.9" id="ld"></div>

<script>setInterval(function(){if($(window).height()>=$(document).height()){$('#ld').text($(document).width()+' px');}else{$('#ld').text($(document).width()+17+' px');}},150);</script>

 

Auteur : Nicolas Barré



retour au blog

Commentaires  

SiloDigital 06-04-2017 13:59
Pas de question mais juste un merci pour cette outil qui va me changer la vie!!!!
Testé sur :
Mac chrome et firefox
iOS (iPhone & iPad mini) : chrome

pour les site en prestashop voici le code à mettre directement après la



{literal}
setInterval(function(){ if($(window).height()>=$(document).height())
{
$('#ld').text($(document).width()+' px');
}
else
{
$('#ld').text($(document).width()+17+' px');
}
},150);
{/literal}
Signaler à l’administrateur

Posez votre question !

Code de sécurité