スクロールバーを作成せずにビューポートの高さと幅を取得する方法は？

ページ全体にわたって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

は '（/ a）は正しい値を返すvp_width'ですか？ 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

スクロールバーを作成せずにビューポートの高さと幅を取得する方法は？

答えて

関連する問題