Media Queries

Ich habe heute einen sehr interessanten und aktuellen Artikel über die Einbindung von CSS Media-Queries zur Anzeige von Grafiken auf hochauflösenden Displays gelesen. Der Ursprung liegt in der Markteinführung des Apple iPhone 4 und folgender CSS-Deklaration:

.image {
  background-image: url("images/200_200.png");
  width: 200px;
  height: 200px;
}
 
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .image {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Inzwischen verfügen aber auch Smartphones mit Android oder Windows-Phone Betriebssystemen über die Möglichkeit zur Darstellung von hochauflösenden Grafiken auf hochauflösenden Displays. Im Wandel der Zeit hat sich daher auch die zur verwendende CSS Media-Query-Eigenschaft angepasst (siehe Retina Display Ready With Media Query):

@media 
/* WebKit based browsers (Chrome, Safari, latest Opera) */
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
/* Older Firefox browsers (prior to Firefox 16) */
only screen and (min--moz-device-pixel-ratio: 2),   
/* Opera Mini & Opera Mobile */
only screen and (-o-min-device-pixel-ratio: 3/2),  
/* Kindle Fire, Kindle HD */
only screen and (min-device-pixel-ratio: 1.5),  
/* The standard way: dots-per-physical-inch */
only screen and (min-resolution: 2dppx),
/* dppx-Fallback: dots-per-CSS-inch */
only screen and (min-resolution: 192dpi) {
  .image {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Der empfohlene Weg ist demnach die Verwendung des Kriteriums „min-resolution“. Googles Chrome-Browser zeigt in der Developer Console sogar eine Meldung an, falls ein anderer Media-Query verwendet wird:

Consider using ‚dppx‘ units instead of ‚dpi‘, as in CSS ‚dpi‘ means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual ‚dpi‘ of a screen.

Für die Unterstützung älterer Geräte müssen weiterhin die anderen Eingrenzungen verwendet werden. Damit die Media-Queries wie erwartet funktionieren, muss im HTML-Dokument folgendes HTML-Tag im Kopfbereich gesetzt werden:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Die Zukunft verspricht jedoch eine Ablösung des Viewport-Meta-Tags durch folgende CSS-Angaben (siehe An introduction to meta viewport and @viewport):

@-webkit-viewport { width: device-width }
@-moz-viewport { width: device-width }
@-ms-viewport { width: device-width }
@-o-viewport { width: device-width }
@viewport { width: device-width }

Um der Flut an herstellerspezifischen Angaben gerecht zu werden, empfehle ich die dynamische Stylesheet Sprache Less in Kombination mit LESS Hat 2. Wer nur LESS benutzen möchte, der kann sich mit folgendem Mixin behelfen:

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 2)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)",
~"only screen and (min-resolution: 2dppx)",
~"only screen and (min-resolution: 192dpi)";
 
.image {
  background-image: url("images/200_200.png");
  width: 200px;
  height: 200px;
  @media @highdensity {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Schlagwort: Media Queries

Aktueller CSS Media-Query zur Anzeige von hochauflösenden Bildern