width versus device-width
In CSS media kann der Unterschied zwischen width und device-width ein wenig verwirrend sein, also erklären wir das ein wenig. device-width bezieht sich auf die Breite des Geräts selbst, mit anderen Worten, auf die Bildschirmauflösung des Geräts. Sagen wir, die Auflösung Ihres Bildschirms ist 1440 x 900. Das bedeutet, der Bildschirm hat eine Breite von 1440 Pixeln, also hat er ein device-width von 1440px. Die meisten Mobiltelefone haben eine Gerätebreite von 480px oder weniger, einschließlich des beliebten iPhone 4 (mit einer Gerätebreite von 320px), obwohl es technisch eine Auflösung von 640 x 960 hat. Dies ist auf das Retina-Display des iPhone 4 zurückzuführen, das zwei Gerätepixel in jedes CSS-Pixel auf dem Bildschirm packt. Dies gilt auch für das Ipad 3; sein gemeldetes device-width ist 768px, genau wie seine Vorgänger, obwohl seine tatsächliche Bildschirmauflösung 1536px x 2048px beträgt. Im Allgemeinen ist width vielseitiger, wenn es darum geht, responsive Webseiten zu erstellen, obwohl device-width nützlich ist, wenn Sie speziell auf mobile Geräte abzielen wollen (und nicht auf Desktops mit einem kleinen Browserfenster zum Beispiel), da Desktops selten Bildschirmauflösungen unter einer bestimmten Zahl wie 320px x 480px haben.
Die folgende Tabelle zeigt die Bildschirmauflösung und die CSS-Media-Device-Dimensionen einiger gängiger Geräte, die es gibt:
| Gerät | Auflösung (px) | Gerät-width/ device-height (px) |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480, im Hoch- und Querformat |
| iPhone 4 | 640 x 960 | 320 x 480, im Hoch- und Querformat. device-pixel-ratio ist 2 |
| iPhone 5, 5s | 640 x 1136 | 320 x 568, im Hoch- und Querformat. device-pixel-ratio ist 2 |
| iPhone 6 | 750 x 1334 | 375 x 667, im Hoch- und Querformat. device-pixel-ratio ist 2 |
| iPhone 6 plus | 1242 x 2208 | 414 x 736, im Hoch- und Querformat. device-pixel-ratio ist 3 |
| iPad 1 und 2 | 768 x 1024 | 768 x 1024, im Hoch- und Querformat |
| iPad 3 | 1536 x 2048 | 768 x 1024, im Hoch- und Querformat
CSS-Pixeldichte ist 2 |
| Samsung Galaxy S I und II | 480 x 800 | 320 x 533, im Hochformat
CSS-Pixeldichte ist 1.5 |
| Samsung Galaxy S III | 720 x 1280 | 360? x 640?, im Hochformat |
| HTC Evo 3D | 540 x 960 | 360 x 640, Hochformat
CSS-Pixeldichte ist 1.5 |
| Amazon Kindle Fire | 1024 x 600 | 1024 x 600, Querformat |
Um die Sache noch komplizierter zu machen, bei iPhone- und iPad-Geräten entspricht die Gerätebreite immer der Breite des Geräts im Hochformat, unabhängig davon, ob sich das Gerät in diesem Modus oder stattdessen im Querformat befindet. Bei anderen Geräten ändert sich die Gerätebreite je nach Ausrichtung.
* Eine vollständige Liste der Geräte und ihrer Bildschirmauflösungen finden Sie auf dieser Seite.
Lassen Sie uns nun einige weitere CSS-Media-Queries sehen, die verschiedene Geräte und Bildschirmgrößen erfassen:
/* #### Mobile Phones Portrait #### */
@media screen und (max-device-width: 480px) und (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
@media screen und (max-device-width: 640px) und (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen und (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 6 und 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* einige CSS hier */
}
/* #### Tablets Hoch- oder Querformat #### */
@media screen und (min-device-width: 768px) und (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktops #### */
@media screen and (min-device-width: 1024px){
/* some CSS here */
}
So haben wir jetzt eine ziemlich gute Vorstellung von der Verwendung von CSS media queries. Es gibt jedoch noch ein weiteres wichtiges Puzzlestück, das wir benötigen, damit alles wie erwartet funktioniert, und das ist der viewport meta Tag.
- Einführung in CSS-Media-Queries
- Breite versus Gerätebreite
- Das Viewport-Meta-Tag – der Schlüssel zur Vorbereitung einer Seite für die Optimierung für mobile Geräte
- CSS-Media-Query-Matching in JavaScript mit window.matchMedia()
Das Viewport-Meta-Tag – der Schlüssel zur Vorbereitung einer Seite für die Optimierung für mobile Geräte 