CSS für hochauflösende Bilder auf mobilen und Retina-Displays

Question

Meine Website-Bilder sehen für Benutzer mit Retina-Displays verschwommen aus. (Zum Beispiel auf dem Retina MacBook Pro).

Wie kann ich Besuchern mit Retina-Displays Bilder in hoher Auflösung liefern, aber allen anderen Bilder in Standardgröße, während das Bild die gleiche scheinbare Größe behält?

Answer 1

in Ihrem HTML erstellen so eine <div> wie:

<div class="ninjas-image"></div> 

Und in Ihrem CSS hinzufügen:

.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('ninja-devices@2x.png'); 
    background-size: 410px 450px; 
    } 
} 

hier Die Magie in der Abfrage @media CSS ist. Wir haben ein Bild doppelter Größe (ninja-devices@2x.png), das wir sub-in, wenn das Gerät ein 'Device Pixel Ratio' von 1,5 (144 dpi) oder mehr meldet. Auf diese Weise können Sie Bandbreite sparen, indem Sie das ursprüngliche, kleinere Bild auf Nicht-Retina-Geräte übertragen, und natürlich sieht es auf Retina-Geräten gut aus.

Hinweis:

Diese Antwort im Jahr 2016 aktualisiert wurde Best-Practice zu reflektieren. min-device-pixel-ratio hat es nicht in den Standard geschafft. Stattdessen wurde min-resolution zum Standard hinzugefügt, aber Desktop und Mobile Safari unterstützen es zum Zeitpunkt des Schreibens nicht (also das -webkit-min-device-pixel-ratio Fallback). Sie können die neuesten Informationen unter folgender Adresse abrufen: .

Answer 2

Wir haben mehrere Fälle folgendes zu handhaben sind mit denen das Verhältnis 1,5 oder höher - dies mehr Geräte und Browser berücksichtigt:

@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) { 

Wir haben unsere gesamte Website Retina aktiviert: http://www.embraceware.com/