Jquery windows.width（height）overflow with

ウィンドウのサイズに問題があります。私はこのJquery windows.width（height）overflow with

var boxwidth = $(window).width(); 
var boxheight = $(window).height();

のようにウィンドウのサイズを取る。そしてcanvas

var canvas: document.createElement("canvas"), 
    start: function() { 
    this.canvas.width = boxwidth; 
    this.canvas.height = boxheight; 
    this.context = this.canvas.getContext("2d"); 
    document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
    }

を作成しかし、私は、幅と高さにオーバーフローを得ています。

ウィンドウサイズに完全に合ったキャンバスを作成したいと思います。さて、私は助けるべきである私はすでにあなたのhtmlファイルの先頭に<!DOCTYPE html>を追加body

出典

2016-06-29 yahoo5000

まあ、私は "正常な"解決策を見つけようとしましたが、私は見つからなかったので、ここで "トリッキーな"解決策です。これはアイデアですが、あなたのプロジェクトに合うようにカスタマイズする必要があると私は同意します。

ロジックは、ドキュメントの全幅と高さを取り、キャンバスの寸法をそれに応じて設定することを意味するdivを作成することです。最後のステップはそう要素（HTML、ボディなど）の状態を復元するために

です：

$('html, body').css({position: 'relative', height: '100%', overflow:'hidden'}); 
 
var tester = $('<div style="width:100%;height:100%" />').appendTo(document.body); 
 
$('canvas').css({ 
 
    width:$('body').width(), 
 
    height:tester.height() 
 
}); 
 
tester.remove(); 
 
$('html, body').removeAttr('style');

html, body { 
 
    margin:0; 
 
} 
 

 
canvas { 
 
    background:red; 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas></canvas>

http://jsbin.com/pinide/edit?html,css,js

出典

2016-06-29 09:08:20

これはトリッキーな解決策であるがあります今のところ私はちょうどオーバーフローせずにフィットする完璧な値を見つける – yahoo5000

にmargin:0とpadding:0を追加オーバーフローの多く

を得ました。

出典

2016-06-29 09:01:38

私はすでにこの – yahoo5000

Jquery windows.width（height）overflow with

答えて

関連する問題