Obtenez la hauteur et la largeur de la fenêtre du navigateur sans barres de défilement à l'aide de jquery?

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 prend pas en compte les barres de défilement du navigateur.

$(window).height();
$(window).width();

Plus d'informations

• http://api.jquery.com/height/
• http://api.jquery.com/width/

Cependant, l'utilisation de jQuery n'est pas essentielle pour obtenir ces valeurs. Utilisation

document.documentElement.clientHeight;
document.documentElement.clientWidth;

pour obtenir des tailles sans les barres de défilement, ou

window.innerHeight;
window.innerWidth;

pour obtenir toute la fenêtre, y compris les barres de défilement.

document.documentElement.clientHeight <= window.innerHeight;  // is always true

N'utilisez pas jQuery, utilisez simplement javascript pour obtenir un résultat correct:

Cela inclut la largeur / hauteur de la barre de défilement:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

Cela exclut la largeur / hauteur de la barre de défilement:

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

Voici un JS générique qui devrait fonctionner dans la plupart des navigateurs (FF, Cr, IE6 +):

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

Vous utilisez les mauvais appels de méthode. Une fenêtre est la "fenêtre" qui est ouverte sur le document: quelle quantité vous pouvez voir et où.

L'utilisation $(window).height()ne vous donnera pas la taille de la fenêtre d'affichage, elle vous donnera la taille de la fenêtre entière, qui est généralement la taille du document entier bien que le document puisse être encore plus grand.

Pour obtenir la taille de la fenêtre, utilisez window.innerHeightet window.innerWidth.

https://gist.github.com/bohman/1351439

N'utilisez pas les méthodes jQuery, par exemple $(window).innerHeight(), car elles donnent les mauvais nombres. Ils vous donnent la hauteur de la fenêtre, non innerHeight.

La description

Ce qui suit vous donnera la taille de la fenêtre des navigateurs.

Échantillon

$(window).height();   // returns height of browser viewport
$(window).width();   // returns width of browser viewport

Plus d'information

• jQuery.height ()
• jQUery.width ()

Comme Kyle l'a suggéré, vous pouvez mesurer la taille de la fenêtre d'affichage du navigateur client sans prendre en compte 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');

Alternativement, si vous souhaitez trouver les dimensions de la fenêtre client tout en tenant compte de la taille des barres de défilement, alors cet exemple ci-dessous vous convient le mieux.

N'oubliez pas de définir votre étiquette corporelle sur une largeur et une hauteur de 100% juste pour vous assurer que la mesure est précise.

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 (montrant la hauteur de la fenêtre 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 html4 de transition: <!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 qu'il $(window).height()prend la hauteur du document et non la hauteur du navigateur. Avec la spécification doctype, c'est résolu de manière satisfaisante, et je suis presque sûr que vous éviterez le "passage du scroll-overflow à hidden puis back", ce qui est, je suis désolé, un truc un peu sale, surtout si vous ne le faites pas ' t le documenter sur le code pour l'usage futur du 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:

$(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");
    } 
});

$(document).ready(function() {

  //calculate the window height & add css properties for height 100%

  wh = $( window ).height();

  ww = $( window ).width();

  $(".targeted-div").css({"height": wh, "width": ww});

});

Utilisation de jQuery ...

$ (document) .height () & $ (window) .height () renverra les mêmes valeurs ... la clé est de réinitialiser le remplissage et la marge du corps afin que vous n'obteniez aucun défilement.

<!--

body {
    padding: 0px;
    margin: 0px;
    position: relative;
}

-->

J'espère que cela t'aides.

Je voulais un look différent de mon site Web pour la largeur de l'écran et le petit écran. 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 echoavec dans la fonction echo-fonction javascript.

mon code dans la <header>section 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>
"; 
?>