Media Queries für Retina Displays

[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("[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.

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é

[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

[Gunnar Bittersmann]

@@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("[e-mail]");
    background-size: 496px auto;
  }
}

Es wird jetzt aber immer dieses Hintergrundbild ("[e-mail]") 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 "[e-mail]" geladen wird?

Weil du nichts anderes angegeben hast?

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

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

---

1. Hallo, Martin. 😉 ↩︎

[ebody]

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

Habe ich nicht gemacht und auch nicht geschrieben. Hatte ich evtl. was missverständlich beschrieben.

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

Eine schmale Displaygröße, wie sie für Smartphones üblich ist.

Die Displaygröße sagt auch ziemlich nichts über das Gerät.

Genau. Ich bezeichne die Größe einfach als „mobile Displaygröße“

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

Stimmt. "bis", so habe ich es gemeint.

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

Danke, werde ich mir anschauen.

Gruß ebody

[Gunnar Bittersmann]

@@ebody

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

Eine schmale Displaygröße, wie sie für Smartphones üblich ist.

Die Displaygröße sagt auch ziemlich nichts über das Gerät.

Genau. Ich bezeichne die Größe einfach als „mobile Displaygröße“

Wenn du das einfach als „schmaler Viewport“ bezeichnest anstatt irgendwas mit „mobile“, hilft das, Missverständnisse zu vermeiden.

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

[Rolf B]

Hallo ebody,

Ja, dann schaltet das ja auch nicht um!

Chrome hat in den Einstellungen der Developer Tools (der Zahnrad-Button) den Bereich "Geräte". Die dort gelisteten Geräte werden leider nicht mit ihrer Auflösung und dpi-Zahl gelistet. Aber Du kannst ein eigenes Gerät definieren, und dort den dppx Wert vorgeben (also Realpixel pro CSS Pixel).

Da ein CSS Pixel von 96dpi ausgeht, kannst Du mit einem dppx-Wert von 2 die 192dpi emulgieren. Oder so…

Wenn du dann in der Mobil-Emulatoransicht zwischen Geräten mit unterschiedlicher Auflösung umschaltest, solltest Du einen Effekt sehen.

Übrigens ist der Edit-Dialog für Geräte nicht als Vorlange empfehlenswert. Placeholder sind keine Labels!

Rolf

[ebody]

Hallo Rolf,

vielen Dank für den Tipp.

Chrome hat in den Einstellungen der Developer Tools (der Zahnrad-Button) den Bereich "Geräte". Die dort gelisteten Geräte werden leider nicht mit ihrer Auflösung und dpi-Zahl gelistet. Aber Du kannst ein eigenes Gerät definieren, und dort den dppx Wert vorgeben (also Realpixel pro CSS Pixel). Da ein CSS Pixel von 96dpi ausgeht, kannst Du mit einem dppx-Wert von 2 die 192dpi emulgieren. Oder so…

Ich verstehe gerade nicht, wie ich das umsetzen soll. Ein MacBook Pro (16″) z.B. hat eine Auflösung von 3456 × 2234 Pixel.

Man kann die entsprechende Auflösung angeben. Aber was du beschreibst, scheint mir so als könnte man die Pixeldichte auch simulieren?! Wie kann man das denn einstellen? Oder mit welcher Formel müsste ich diese jetzt umrechnen, um ein Retina Display zu simulieren?

Übrigens ist der Edit-Dialog für Geräte nicht als Vorlange empfehlenswert. Placeholder sind keine Labels!

Hier weiß ich nicht, was du meinst.

Gruß ebody

[Auge]

Hallo

Chrome hat in den Einstellungen der Developer Tools (der Zahnrad-Button) den Bereich "Geräte". Die dort gelisteten Geräte werden leider nicht mit ihrer Auflösung und dpi-Zahl gelistet. Aber Du kannst ein eigenes Gerät definieren, und dort den dppx Wert vorgeben (also Realpixel pro CSS Pixel). Da ein CSS Pixel von 96dpi ausgeht, kannst Du mit einem dppx-Wert von 2 die 192dpi emulgieren. Oder so…

Ich verstehe gerade nicht, wie ich das umsetzen soll. Ein MacBook Pro (16″) z.B. hat eine Auflösung von 3456 × 2234 Pixel.

Man kann die entsprechende Auflösung angeben. Aber was du beschreibst, scheint mir so als könnte man die Pixeldichte auch simulieren?!

Ich habe diesen Simulator bisher nie selbst verwendet, aber mir scheint die dritte Angabe des Punkts Gerät (hier: 2) der Multiplikator zu sein, der die simulierte Auflösung auf die physische Auflösung des Displays mappt.

Tschö, Auge

[ebody]

Im Chrome scheint das damit nicht zu funktionieren. Im Firefox schon.

Gerät mit Device-Pixel-Ratio (DPR) Wert 2 hinzufügen:

Device mit DPR Wert 2 auswählen und anzeigen:

Hier habe ich eine Media Query genutzt, um zu prüfen, ob die Benutzerdefinierten Geräte erkannt werden. Ich habe mich dabei hier dran gehalten..

Gruß ebody

[Rolf B]

Hallo ebody,

zur Bedienung hast Du ja schon Hinweise bekommen.

nicht als Vorlange Vorlange empfehlenswert.
Hier weiß ich nicht, was du meinst.

Der Dialog verwendet für seine Eingabefelder keine Beschriftungen. Statt dessen stellt er den Zweck der Felder als Placeholder dar (also das, was im Eingabefeld grau steht, solange man nicht selbst was eingibt). Und das ist schlechtes UI Design.

Rolf