CSS-Media Queries sind eine prima Möglichkeit, um eine Website mit einfachen Mitteln an die verschiedenen Desktop-PCs und mobilen Geräte anzupassen (Stichwort Responsive Layout). Hier findet Ihr ein Code-Snippet für alle gängigen Geräte wie iPhone, iPad, Kindle, Android, Desktop-PCs und auch große Bildschirme.
/* All Smartphones in portrait and landscape ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in portrait ----------- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
/***** ANDROID DEVICES *****/
/* Android 240 X 320 ----------- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in Landscape 685 X 380 ----------- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Portrait 600 X 1024 ----------- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Landscape 1024 X 600 ----------- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}
/***** ALL GENERATION IPADS *****/
/* iPads in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}
/* iPad in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}
/* iPad in portrait----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}
/***** Retina IPAD 3 & 4*****/
/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/
/* iPad 1 & 2 in portrait and landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in portrait ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}
/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}Den obenstehenden CSS-Code fügt man einfach am Ende seiner CSS Style-Datei (z.B. style.css) mit ein und passt ihn die Stil-Angaben für die jeweiligen Geräte an. Anschließend sollte man die Ansicht der Webseite natürlich auf den jeweiligen Geräte testen. Diese Media-Queries werden von folgenden Browsern unterstützt: Internet Explorer (IE) ab Version 9, Firefox ab Version 3.5, Safari ab Version 3, Opera ab Version 7, sowie von den meisten aktuellen Smartphones und anderen Bildschirm-basierten Geräten wie dem Apple iPad oder dem Amazon Kindle.
Die älteren Microsoft Browser IE5 bis IE8 sowie Firefox 1 und 2 sowie der Safari 2 unterstützen normalerweise keine CSS Media Queries, aber auch hier gibt es – falls unbedingt nötig – eine abgespeckte Lösung über eine zusätztliche kleine JavaScript Library.
Aufgrund der Sicherheitslücken, mit denen viele ältere Browser zu kämpfen haben, sollte man seinen Kunden auf jeden Fall zu einem Update des Browsers raten. Bei der Entwicklung neuer Webseiten sprechen natürlich auch der Aufwand und die damit verbundenen hohen Kosten gegen eine Komplettoptimierung von Responsive Layouts für alle Browser und mobilen Geräte. Man entscheidet sich dann lieber für eine vereinfachte aber funktionierende Ansicht der Webseite.