0


0

キャンバスの寸法を動的に設定すると、サイズ変更時にドキュメントの高さが増加する

キャンバス要素を取得してドキュメントの高さとウィンドウ幅全体を取得しようとしているので、ウィンドウのサイズを変更すると、キャンバス要素がそれに合わせて伸縮し、事実上、フルスクリーンキャンバスが表示されます。 ただし、実際に行われているのは、ウィンドウのサイズがどのように変更されても、ドキュメントの高さ(したがって、キャンバスの高さ)が増加することです。

私はこのコードを使っています:

$(document).ready(function () {
    $("#wrapper").before("");
    $(window).resize(function() {
        $("#depth").attr("width",$(window).width());
        $("#depth").attr("height",$(document).height());
    });
});

また、まったく同じ結果でDOMスクリプトを使用してみました。 これはキャンバス要素のサイズ変更の癖ですか、それとも何か不足していますか?

http://www.robnixondesigns.com/wtf/ [ここに実際の問題がある]

1 Answer


1


私はこれがうまくいくと思いますか? コンテンツがまだ到達していない場合は、画面の下部に到達するように常に「#wrapper」が引き伸ばされるように私が書いたコードから適合しています(ただし、最小の高さの制約は削除しました)。 これも幅のニーズに合わせて調整できると確信しています。

あなたが間違っていた場所の概要は、ウィンドウが負のサイズに変更された場合の高さを計算する数学にあります。

また、ウィンドウの高さを計算する際にブラウザーの不整合に対処するために、いくつかの余分なビットを残しました。私が見つけたいくつかのバグを解決しました。

$(document).ready(function() {resize()});
$(window).resize(function() {resize()});

// Calculate Required Wrapper Height
function resize() {
    // I think this is for Opera's benefit?
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();

    // IE7
    if (jQuery.browser.msie) {
        if(parseInt(jQuery.browser.version) == 7) {
            viewportHeight -= 3;
        }
    }

    if($('#wrapper').height() > viewportHeight) {
        $('.content').height($('#wrapper').height() - viewportHeight);
    }

    if($('#wrapper').height() < viewportHeight) {
        $('.content').height(viewportHeight - $('#wrapper').height());
    }
}