Le immagini del mio sito Web appaiono sfocate per gli utenti con display retina. (Ad esempio, su Retina MacBook Pro).CSS per immagini ad alta risoluzione su display mobile e retina
Come faccio a offrire immagini ad alta risoluzione ai visitatori con display retina, ma immagini di dimensioni standard a tutti gli altri, mantenendo l'immagine delle stesse dimensioni apparenti?
nel codice HTML, creare un <div> in questo modo:
<div class="ninjas-image"></div>
E nel CSS, aggiungere:
.ninjas-image {
background-image: url('ninja-devices.png');
width: 410px;
height: 450px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ninjas-image {
background-image: url('[email protected]');
background-size: 410px 450px;
}
}
La magia qui è nel CSS @media query. Abbiamo un'immagine a due dimensioni ([email protected]) che inseriamo quando il dispositivo riporta un "rapporto pixel del dispositivo" di 1,5 (144 dpi) o più. In questo modo è possibile risparmiare larghezza di banda consegnando l'immagine originale, più piccola, ai dispositivi senza retina e, naturalmente, è ottima sui dispositivi Retina.
Nota:
Questa risposta è stata aggiornata nel 2016 per riflettere le migliori pratiche. min-device-pixel-ratio non è entrato nello standard. Invece, lo standard min-resolution è stato aggiunto allo standard, ma Safari desktop e mobile non lo supporta al momento della scrittura (quindi il fallback -webkit-min-device-pixel-ratio). È possibile controllare le ultime informazioni al numero: http://caniuse.com/#feat=css-media-resolution.
Si potrebbe desiderare di spiegare come funziona questo codice: qual è lo scopo della query multimediale e delle dichiarazioni 'background-size' e così via. (Non è più necessario '-webkit-background-size' più, comunque ...) – BoltClock
@BoltClock Abbiamo aggiunto un po 'più di spiegazione e rimosso -webkit-background-size come suggerito. Grazie! –
Solo webkit o ci sono altri prefissi di vedor? Sospetto che ci sia anche -moz – mastazi
Abbiamo usato il seguente per gestire più casi in cui il rapporto è 1.5 o superiore - questo richiede più dispositivi e browser in considerazione:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
Abbiamo tutto il nostro sito Retina abilitato: http://www.embraceware.com/
@ChrisNolet, se si desidera ripristinare l'originale, è necessario eseguire un rollback e non provare a modificare nuovamente. – psubsee2003
Mi dispiace @ psubsee2003 - non sono sicuro di come farlo! Non vedo alcun link di rollback su questa pagina: http://stackoverflow.com/posts/11063689/revisions. Puoi dare una mano? Grazie. –
@ChrisNolet my bad ... Ho dimenticato che non hai la possibilità di eseguire il rollback fino a quando non hai 2K rep. Lo risponderò per te. – psubsee2003
Una soluzione Javascript: [retinajs] (http://retinajs.com/) –