ebody: Media Queries für Retina Displays

Beitrag lesen

SELF-Forum

Media Queries für Retina Displays

ebody
– Informationen zu den Bewertungsregeln

Hallo,

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

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

Es wird jetzt aber immer dieses Hintergrundbild ("name@2x.jpg") 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.

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 "name@2x.jpg" geladen wird?

Gruß René

Beitrag melden
–
Informationen zu den Bewertungsregeln