iOS7 ignora le query media retina css - background-size

Question

Apple ha appena rilasciato il suo nuovo sistema operativo iOS7 ma sta causando problemi con le mie domande multimediali con la mia icona retina. Sembra che la proprietà in background sia ignorata. Un'immagine di esempio è qui: http://imgur.com/R3OgFgN

La sostituzione dell'immagine funziona perfettamente su iPhone 4, 4s, 5 con iOS6 e versioni successive (qualsiasi browser). browser iOS7 sembrano afferrare l'immagine ad alta risoluzione, ma ignorare la proprietà background-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%; 
} 

Quello che fa;

• sostituisce l'immagine originale l'immagine @ 2x con

Quello che non fa;

• Adatta l'immagine di sfondo alla dimensione dell'elemento div.

Testato su iOS7 Safari & Chrome.

Qualcuno ha avuto questo problema e, in caso affermativo, come è riuscito a risolverlo?

Answer 1

Ho risolto! Risulta, iOS7 ripristina la proprietà di sfondo durante l'esecuzione di una query multimediale. Il trucco è specificare la dimensione dello sfondo con le esatte dimensioni dei pixel, o con un valore del 100% come tale;

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

NB - ho anche scoperto che tra cui l'importante tag assicurata tutti i dispositivi retina leggere la query correttamente, tra cui Samsung S3 & S4!. Godere.

Answer 2

Perché l'esempio è un'immagine. Non riesco a ispezionare il codice.

si potrebbe provare la seguente opzione:

1. Se larghezza e l'altezza del div è fisso. È possibile impostare una larghezza e altezza fissa per l'immagine. anche normalmente il display retina richiede il "rapporto min-device-pixel" per la visualizzazione ad alta risoluzione.

ad es.

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

o se il div non è fisso.

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

Provare se questo può risolvere il problema.

Cheers!

Answer 3

Questo comportamento non è bacato. È colpa tua. È possibile impostare tutte le proprietà di fondo qui:

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

modo del browser per trattamento di questo come

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 

così la vostra ultima riga background-size: 100%; viene sovrascritto dal background-size:auto auto !important;