Comment obtenir la hauteur et la largeur de la fenêtre sans créer de barres de défilement?

Si vous tentez d'étendre un HTML canvas sur une page entière, les fonctions jQuery width() et height() créent des barres de défilement verticales et horizontales.Comment obtenir la hauteur et la largeur de la fenêtre sans créer de barres de défilement?

HTML

<body> 
    <canvas id="bg_canvas" width="" height=""></canvas> 
</body>

jQuery

// Expand canvas to full viewport size 
    var vp_width = window.clientWidth; 
    var vp_height = window.clientHeight; 

    $("#bg_canvas").css({ 
     "width" : vp_width, 
     "height" : vp_height 
    }); 

// Canvas Drawing 
    var canvas = document.getElementById("bg_canvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.fillStyle="#cbf7ed"; 
    ctx.fillRect(100,100,vp_width,100);

a également essayé le Javascript window.innerheight et window.innerWidth, mais cela crée aussi des barres de défilement.

Source

2017-08-07 Sanph

est 'vp_width' renvoyer les (/ a) valeur correcte? Vous pouvez aussi essayer CSS: '#bg_canvas {width: 100vw; height: 100vh;}'. – Alvaro

La feuille de style de navigateur par défaut donne probablement une marge à l'élément <body>. Parce que la toile est dans le corps, cela rendrait la toile plus grande que son parent, créant une vue défilante.

Si vous souhaitez que la zone de travail couvre la largeur de la fenêtre, supprimez la marge et le remplissage de l'élément de corps via CSS. Vous pouvez le vérifier avec un style en ligne: <body style="margin:0 padding:0"> (bien que ce soit généralement la meilleure pratique pour placer le style dans des fichiers discrets ou au moins dans l'en-tête html).

Sinon, si vous voulez la toile pour enjamber le corps, utilisez quelque chose comme:

var vp_width = $('body').innerWidth; 
var vp_height = $('body').innerHeight;

Source

2017-08-07 21:16:44 Pezzer

Merci! Cela semble être ça. J'ai maintenant ajouté une position: absolue sur la toile, contournant le corps. Merci encore! – Sanph

Comment obtenir la hauteur et la largeur de la fenêtre sans créer de barres de défilement?

Répondre

Questions connexes