2

キャンバス要素を作成し、アスペクト比を維持しながら、JavaScriptを使用してビューポートで可能な限り大きくします。

iPadを回転させると、デバイスは最初にページを回転させ、その後でのみサイズ変更イベントを起動します。

問題は、横向き（幅約800px）から縦向き（約400px）の場合、その時点ではまだサイズ変更が行われていないため、体の一部が表示されないことです。この後、resizeイベントはキャンバスのサイズを正しいサイズに変更しますが、キャンバスの一部（およびドキュメント）はまだビューポートの外側にあります。

つまり、基本的に問題が存在するのは、ボディが広すぎるためにiPadがすでにボディの両側の一部を切り取った後にのみ、サイズ変更イベントが起動するためです。

補正するためにキャンバスにマージンを設定することでこれを修正できますが、それは汚い解決策です...誰かがより良い提案がありますか？

4

1 に答える 1

1

これは汚い解決策と見なすこともできますが、過去にsetTimeoutこの問題に対処するために a を使用しており、常に信頼できるようです。

window.onorientationchange = function() {
    canvasResize();
}

function canvasResize() {
    window.setTimeout(function () {
        //Your code here based on new size
    }, 100);
}

または、少し汚いソリューションを探している場合は、ビューポートの幅を自分で追跡し、それが変更されるまで待って更新を行うことができるはずです。スクリプトのどこかに追加します。

var viewportWidth = window.innerWidth;

そして変更canvasResize：

function canvasResize() {     
    if(window.innerWidth != viewportWidth) {//Dimensions have changed for sure
        viewportWidth = window.innerWidth; //Update viewportWidth for future use
        //Your code here based on new size
    }
    else {
        //Delay and try again
        window.setTimeout(function () {
            canvasResize();
        }, 100);
    }
}

どちらも非常に迅速で汚いので、もっとエレガントな解決策があれば興味がありますが、まだ見つけていません。

于 2012-04-19T14:50:12.753 に答える