如何在不創建滾動條的情況下獲取視口的高度和寬度？

嘗試在整個頁面上擴展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

如何在不創建滾動條的情況下獲取視口的高度和寬度？

回答

相關問題