iPadとiPhoneでスケーリングすると背景がぼやけます

Question

私はユーザーに特定の100x100pxの背景画像を拡大できるようにするWebアプリケーションを作成しています。

画像をダブルタップすると、画像のサイズが2倍になります（-webkit-transform：scale（2））。

移行が完了すると、100x100pxイメージを200x200pxイメージにスワップします。何らかの理由で、画像が非常にぼやけています。

私は画像を表示するためにdivタグの代わりにimgタグを使用しようとしました。ここでは画像がぼやけていません。どうしてこれなの？

私はiPadとiPhoneのメモリ制限を回避するために背景イメージを使用する必要があります（私はimgタグを使用すると私はメモリウォールになります）。

誰でも手伝ってもらえますか？どうもありがとうございます。

Answer 1

Imは3つの事を主張：divのスケーリング

1. は、ピクセルを伸ばし、よりを追加することではありません。
2. background-size：contains;背景画像が完全に表示されるようにします
3. divは決してサイズを変更しません。

---

1. あなたはdiv要素は、静止画が、それは400x400のピクセルだとしても200×200ピクセルにリサイズされた200×200ピクセル
2. あるsee hereよう
。 See here
4. ほぼ1で証明されています。フォントはまだまだシャープですが、javascriptでは幅と高さが200x200ピクセルだと思います。

---

わかりました、あなたの修正のためのよう：いくつかの方法があります

。

スケーリングの代わりに幅と高さを変更できます。これはあまり美しいものではありません。少なくとも、このアニメーションがiOS上でスローされていない場合、あなたは非常にラッキーです。

何か他のものがwebkitTransitionEndイベントをバインド解除することを忘れないでくださいスケーリング、検出webkitTranstionEnd

$('div').bind("webkitTransitionEnd", function() { 
    $(this).css({ 
     "-webkit-transform": "scale(1)", 
     "width": "400px", 
     "height": "400px" 
    }); 
    $(this).unbind("webkitTransitionEnd"); 
}); 

することができます。それ以外の場合は、関数呼び出しを2倍にします。

しかし、何が起こったのかは、アニメーションのバックです。だから我々は、私たちが望むときに我々はそれを追加したり削除することができますので、クラスでのトランジションを維持する必要があります：

div { 
    -moz-transition-duration: 0ms; 
} 
div.transition { 
    -moz-transition-duration: 200ms; 
} 

を我々はアニメーション化する必要があるときにクラスを追加します。

setTimeout(function() { 
    $('div').addClass("transition"); 
    $('div').css({ 
     backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)', 
     webkitTransform: 'scale(2)', 
     mozTransform: 'scale(2)' 
    }); 
}, 3000); 

をそして再びそれを削除しますin webkitTransitionEnd

$(this).removeClass('transition'); 
$(this).css({ 
    "-webkit-transform": "scale(1)", 
    "width": "400px", 
    "height": "400px" 

}）; $（これ）.unbind（ "webkitTransitionEnd"）;

What ??！それは時間にクラスを追加/削除しませんか？何が起きましたか。

場合によっては、クラスが追加されていることを確認するのに少し時間がかかることがあります。したがって、setTimeout（function（）{...}、0）にCSSの設定をラップする必要があります。私たちは、クラスを削除すると

setTimeout(function() { 
    $('div').addClass("transition"); 
    setTimeout(function(){ 
     $('div').css({ 
      backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)', 
      webkitTransform: 'scale(2)', 
      mozTransform: 'scale(2)' 
     }); 
    }, 0); 
}, 3000); 

はまた：

$(this).removeClass('transition'); 
setTimeout(function(){ 
    $(this).css({ 
     "-webkit-transform": "scale(1)", 
     "width": "400px", 
     "height": "400px" 
    }); 
    $(this).unbind("webkitTransitionEnd"); 
}, 0); 

限り、今の問題は、それがスケールアップだということで、ぼやけ取得し、スケールの後にそれがスーパーシャープ取得します。

私たちはそれについて何をすることができますか私は知っていませんが、あなたがどこに役立つことを願って！

アンドレアス