Comment obtenir la hauteur et la largeur de la fenêtre du navigateur sans barres de défilement à l'aide de jQuery ?
Voici ce que j'ai essayé jusqu'à présent :
var viewportWidth = $("body").innerWidth();
var viewportHeight = $("body").innerHeight();Cette solution ne tient pas compte des barres de défilement du navigateur.
Comme l'a suggéré Kyle, vous pouvez mesurer la taille de la fenêtre du navigateur du client sans tenir compte de la taille des barres de défilement de cette façon.
Exemple (dimensions de la fenêtre SANS barres de défilement)
// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');
// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');Par ailleurs, si vous souhaitez connaître les dimensions de la fenêtre d'affichage du client tout en tenant compte de la taille des barres de défilement, l'exemple ci-dessous vous convient parfaitement.
Tout d'abord, n'oubliez pas de définir une largeur et une hauteur de 100 % pour la balise body, afin de vous assurer que les mesures sont exactes.
body {
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}Exemple (dimensions de la fenêtre AVEC barres de défilement)
// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');
// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');
Le script $(window).height() fonctionne bien (il affiche la hauteur de la fenêtre d'affichage et non le document avec la hauteur de défilement), MAIS il faut que vous mettiez correctement la balise doctype dans votre document, par exemple ces doctypes :
Pour html5 : <!doctype html>
pour le html4 transitoire : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Le doctype par défaut supposé par certains navigateurs est probablement tel que $(window).height() prend la hauteur du document et non celle du navigateur. Avec la spécification du doctype, c'est résolu de manière satisfaisante, et je suis sûr que vous éviterez le "changement de scroll-overflow en hidden et puis en arrière", qui est, je suis désolé, un peu sale, surtout si vous ne le documentez pas sur le code pour l'usage du futur programmeur.
De plus, si vous faites un script, vous pouvez inventer des tests pour aider les programmeurs dans vos bibliothèques, laissez-moi en inventer quelques-uns :
$(document).ready(function() {
if(typeof $=='undefined') {
alert("Error, you haven't called JQuery library");
}
if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
alert("ERROR, check your doctype, the calculated heights are not what you might expect");
}
});
Je voulais un aspect différent de mon site Web pour les écrans larges et les petits écrans. J'ai créé 2 fichiers CSS. En Java, je choisis lequel des 2 fichiers CSS est utilisé en fonction de la largeur de l'écran. J'utilise la fonction PHP echo avec dans le echo -fonction un peu de javascript.
mon code dans le <header> de mon fichier PHP :
<?php
echo "
<script>
if ( window.innerWidth > 400)
{ document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
else
{ document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
";
?> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Duplicata possible de Comment obtenir la largeur de l'écran sans la barre de défilement (moins) ?