Media Queries für Retina Displays

[Matthias Scharwies]

Servus!

Hallo,

ich möchte ein Hintergrundbild ändern, wenn ein Retina Display verwendet wird. Dazu hatte ich hier was gefunden..

Schau mal unter die Überschrift:

Chris Coyier on Aug 15, 2012 (Updated on Feb 14, 2013)

device-pixel-ratio ist missbilligt

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  section .section-info-left {
    background: url("[e-mail]");
    background-size: 496px auto;
  }
}

Es wird jetzt aber immer dieses Hintergrundbild ("[e-mail]") geladen, auch wenn es eine mobile Displaygröße ist. Schon ab einer Breite von 1920, soll das standard Hintergrundbild "name.jpg" verwendet werden.

Ich teste allerdings nicht wirklich mit einem Retina Display, sondern auf Windows 10, im Chrome mit den WebDev Tools und den Device Tools, wo ich die Responsive Anzeige verwende, auf 50% zoome und dann das Display breiter (3500px) und schmaler mache.

Ja, dann schaltet das ja auch nicht um! Du musst schon schauen ob die von dir gewünschten Auflösungen auch auf dem Gerät vorhanden sind.

Daher weiß ich jetzt nicht 100%, ob diese Media Query funktioniert oder ob es an den Test Voraussetzungen liegt?

Hättet ihr eine Idee, warum jetzt immer das Bild "[e-mail]" geladen wird?

Gruß René

Herzliche Grüße

Matthias Scharwies