2

tl;dr : 画像が 100% の幅と高さを占め、ユーザーがブラウザーのサイズを小さくしても、画像が縮小しないため、ドキュメントの幅と高さは変わりません。

画面の幅と高さの 100% を占める動的に描画された SVG 画像 (RaphaelJS によって作成) があります。それが占有するスペースには、表示されていないがスクロールすると見えるスペースが含まれます (ビューポートの幅と高さだけではなく、それを超える可能性があります)。ユーザーがブラウザのサイズを小さく変更したときにスクロールバーが画像だけに表示されないように、またユーザーがサイズを変更したときに画像が切り取られないように、ドキュメントのサイズに合わせて SVG キャンバスのサイズを変更する必要があります。ブラウザが大きくなります。

サイズアップは正常に機能しますが、サイズダウンには問題があります。ユーザーが小さいサイズから大きいサイズにサイズ変更すると、これは正常に機能し、SVG はウィンドウに合わせて拡大されますが、ユーザーが大きいサイズから小さいサイズにサイズ変更すると、実際の画像はドキュメントの一部であるため、ドキュメントが小さくなることはありません。その結果、画像は拡大されますが縮小されることはなく、実際のコンテンツがすべて画面内に収まっていても、画像だけのスクロール バーが表示されます。

現在、SVGキャンバスのサイズを計算する方法は次のとおりです。

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

function getDocWidth() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}

では、ドキュメントが小さくならないように画像を取得するにはどうすればよいですか? 基本的に、getDocWidth と -Height は、ドキュメントの幅と高さを計算するときに画像の寸法を無視する必要があります。

4

1 に答える 1

0

ドキュメントの現在の幅ではなく幅が必要なウィンドウである場合（画像が含まれているため、幅が広くなります）、それを使用しないのはなぜですか？

于 2011-04-24T23:23:32.797 に答える