iOS7がretina cssのメディアクエリを無視しています - background-size

Question

Appleは新しいiOS7オペレーティングシステムをリリースしましたが、私の網膜アイコンのメディアクエリに問題が生じています。 background-sizeプロパティが無視されているようです。画像の例は次のとおりです。http://imgur.com/R3OgFgN

iOS6以降（任意のブラウザ）を実行しているiPhone 4,4、5では、画像の置き換えが完全に行われます。 iOS7のブラウザでは、高解像度のイメージをつかむが、背景-sizeプロパティを無視するように表示されます。

@media (-webkit-device-pixel-ratio: 2){ 
.b .logo{ 
    background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    background-size: 100%; 
} 

それはやるん何。

• は、@ 2xの画像と元の画像に置き換え

それは行いません何。

• div要素のサイズに背景イメージを合わせます。

iOS7 Safari & Chromeでテスト済みです。

誰もこの問題を抱えていましたか？その場合、どのように修正することができましたか？

Answer 1

私はそれを解決しました！うまくいって、メディアクエリを実行しているとき、iOS7はbackground-sizeプロパティをリセットします。そのトリックは、正確なピクセルの大きさで背景サイズを指定するか、そのように100％の値を指定することです。

@media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (-moz-min-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2/1), 
    only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 2dppx){ 
     .logo{ 
      background: url(../img/2x/logo@2x.png) no-repeat 0 0 !important; 
      background-size: 100% !important; 
      width: 30px; 
      height: 40px; 
     } 

N.b - ！私はまたを含む重要なタグは、すべての網膜デバイスは、サムスンS3 & S4を含め、適切にクエリーを読ん確保していることが分かりました。楽しい。

Answer 2

例はイメージなので、私はコードを検査することはできません。

1. div要素の幅と高さが固定されている場合：

   は、次のオプションを試してみてください。固定幅と高さを画像に設定できます。また、通常、網膜ディスプレイは、高解像度表示のために「最小デバイス - ピクセル比」を必要とする。

@media (-webkit-min-device-pixel-ratio: 2) 
     and (min-device-pixel-ratio: 2){ 
.b .logo{ 
    background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important; 
    width: 200px; 
    height: 100px; 
} 

またはdivが修正されていない場合。

@media (-webkit-min-device-pixel-ratio: 2) 
     and (min-device-pixel-ratio: 2){ 
.b .logo{ 
    background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important; 
    background-size: contain; 
} 

これが問題を解決できるかどうか試してください。

乾杯！

Answer 3

これはバグのような動作ではありません。これはあなたのせいです。 あなたがここにすべてのバックグラウンドのプロパティを設定します。

background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important; 

ので、ブラウザは

background-image:url(../img/2x/m-yellloh-logo@2x.png) !important 
background-position:0 0 !important 
background-repeat:no-repeat !important 
background-size:auto auto !important 
and so on 

としてこれを扱いますので、あなたの最後の行background-size: 100%;が「MIN-deivce-pixel-含むbackground-size:auto auto !important;