如何在不创建滚动条的情况下获取视口的高度和宽度？

尝试在整个页面上扩展HTML canvas，但jQuery width()和height()函数正在创建垂直和水平滚动条。如何在不创建滚动条的情况下获取视口的高度和宽度？

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);

也尝试过的Javascript window.innerheight和window.innerWidth，但也创造了滚动条。

来源

2017-08-07 Sanph

是'vp_width'返回（/ A）正确的价值？你也可以尝试使用CSS：'#bg_canvas {width：100vw; height：100vh;}'。 – Alvaro

默认浏览器样式表可能会给<body>元素留有余量。因为画布位于主体内部，所以画布会比其父项大，从而创建可滚动的视图。

如果您希望画布跨越窗口的宽度，请通过CSS从正文元素中移除边距和填充。您可以使用内联样式来验证这一点：<body style="margin:0 padding:0">（尽管将样式放置在离散文件或至少在html标头中通常是最佳做法）。

另外，如果你想在画布跨越身体，使用类似：

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

来源

2017-08-07 21:16:44 Pezzer

谢谢！似乎是这样。我现在在画布上添加了一个位置：绝对，绕过了身体。再次感谢！ – Sanph

如何在不创建滚动条的情况下获取视口的高度和宽度？

回答

相关问题