Gunnar Bittersmann: Media Queries für Retina Displays

Beitrag lesen

SELF-Forum

Media Queries für Retina Displays

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@ebody

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

Wenn du die ganze Zeit auf einem Gerät mit hochauflösendem Display testest, sollte das nicht verwundern.

auch wenn es eine mobile Displaygröße ist.

Was bitte soll eine „mobile Displaygröße“ sein?

Die Größe des Displays ist übrigens ziemlich irrelevant. Was zählt, ist die Größe des Viewports. Der Viewport wird in den wenigsten Fällen den gesamten Bildschirm ausfüllen. Da sind ja noch sowas wie Adressleiste, Sidepanels, …; und das Browserfenster muss auch nicht den Bildschirm füllen.

Die Displaygröße sagt auch ziemlich nichts über das Gerät. Ein schmales Browserfenster auf einem Desktop-Gerät unterscheidet sich nicht von „mobiler Displaygröße“. Ein bildschirmfüllendes Browserfenster auf einem Desktop-Gerät, bei dem der Nutzer stark reingezoomt hat, unterscheidet sich nicht von „mobiler Displaygröße“.

Schon ab einer Breite von 1920, soll das standard Hintergrundbild "name.jpg" verwendet werden.

Ab? Oder bis? Ersteres macht für mich keinen Sinn.

Hättet ihr eine Idee, warum jetzt immer das Bild "name@2x.jpg" geladen wird?

Weil du nichts anderes angegeben hast?

Du möchtest die Querys[1] nach Displayauflösung und Viewportbreite kombinieren.

🖖 Живіть довго і процвітайте

--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix

  1. Hallo, Martin. 😉 ↩︎

Beitrag melden
–
Informationen zu den Bewertungsregeln