Retina Media Query

Von: Jonas, Raimund

In diesem Beitrag findet ihr den Media Query zur Retina-Optimierung.

Aktualisiert von 2013 – 2024

Wenn ihr die Gestaltung eurer Website für hochauflösende Displays optimieren möchtet, führt einer der unkompliziertesten Wege über spezielle Media Queries. Zunächst fragt ihr mit Hilfe des entsprechenden Media Query die Displayauflösung ab, anschließend werden hochauflösende Grafiken nachgeladen. Leider ist der Syntax für Android und iOS nicht einheitlich. Aus diesem Grund archiviere ich in diesem Beitrag die notwendigen Code-Snippets.

Media Queries für hochauflösende Displays

Je nach Display-Auflösung gelten unterschiedliche Media Queries. Ihr müsst selbst entscheiden, ab welcher Pixeldichte ihr hochauflösende Grafiken bereitstellt. Das nachfolgende Beispiel tauscht Grafiken ab einer Pixeldichte von 200% aus.

Verschiedene Einheiten

Die Angabe min-device-pixel-ratio steht für das Verhältnis von CSS-Pixeln zu Gerätepixeln (Device-Pixel-Ratio) und wurde von Apple eingeführt. Diese Angabe ist für iOS notwendig.
Die Angabe in dpi (Dots per Inch) wird für alle anderen Browser benutzt. Da die Angabe in dpi bei Displays allerdings etwas irreführend ist, lautet der neue Standard dppx – Dots per Pixel.

@media
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {

/* CSS Code für hochauflösende Displays */

}

Beispiel anzeigen

Grafiken auf Retina-Displays austauschen

Das folgende Beispiel zeigt einen <div> dem über CSS ein Hintergrundbild zugewiesen wurde. Mit zwei Breakpoints bei 600 und 1000 Pixeln wird das Bild auf Tablets sowie auf Desktop-Computern ausgetauscht. Mit drei weiteren Media Queries werden die Grafiken für Retina-Displays bereitgestellt.

div {
  background: url(smartphone.jpg);
}

@media screen and (min-width:600px) {
  div {background:url(tablet.jpg);}
}

@media screen and (min-width:1000px) {
  div {background:url(desktop.jpg);}
}

/* hochauflösend */

@media
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {

  div {background:url(smartphone@2x.jpg);}
}

@media
  screen and (min-width:600px) and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-width:600px) and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {

  div {background:url(tablet@2x.jpg);}
}

@media
  screen and (min-width:1000px) and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-width:1000px) and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {

  div {background:url(desktop@2x.jpg);}
}

Sass-Mixin für Retina Media Queries

Wenn ihr mit Sass arbeitet, hilft euch vielleicht folgendes Mixin weiter.

// Mixin definieren
@mixin retina {
  @media 
  screen and (-webkit-min-device-pixel-ratio: 2), 
  screen and (min-resolution: 192dpi), 
  screen and (min-resolution: 2dppx) {
    @content;
  }
}

// Mixin anwenden
div {
  width:200px;
  height:100px;
  background-image:url(img/bild.png);

  @include retina {
    background-image:url(img/bild@2x.png);
    background-size: 200px 100px;
  }
}

Der SCSS-Code kompiliert zu:

div {
  width: 200px;
  height: 100px;
  background-image: url(img/bild.png);
}

@media 
  screen and (-webkit-min-device-pixel-ratio: 2), 
  screen and (min-resolution: 192dpi), 
  screen and (min-resolution: 2dppx) {

    div {
      background-image: url(img/bild@2x.png);
      background-size: 200px 100px;
    }
}

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Raimund Büchner

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.