iPadキャンバスローテーション

Question

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

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

横長（約800px）から縦（約400px）に来ると、その時点でまだサイズ変更が行われていないため、身体の一部が表示されません。この後、resizeイベントはキャンバスのサイズを正しいサイズに変更しますが、キャンバスの一部（&ドキュメント）はまだビューポートの外にあります。

身体が広すぎるため、iPadがすでに両側で身体の一部を切断した後にのみ、サイズ変更イベントが起動するため、基本的に問題があります。

これを修正するには、キャンバスに余白を設定して補正することができますが、それは汚い解決策です...誰かがより良い提案をしていますか？

Answer 1

これはまた汚い解決策と考えることもできますが、これまではこの問題に対処するためにsetTimeoutを使用していましたが、常に信頼できると思われます。

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); 
    } 
} 

はどちらもかなり速いと汚れていると、よりエレガントな解決策があるのなら、私は興味があると思いますが、私はそうではありませんまだ1つを見つけました。