Media Queries sind immer dann wichtig, wenn es um responsive Design auf mobilen Endgeräten geht. Sie sorgen für perfektes Skalieren des Layouts. Die folgende Liste beinhaltet die Media Queries für alle iPhones, iPads und das Samsung Galaxy S7+ Tablet.
Im Gegensatz zu vielen anderen Listen funktionieren diese Media Queries für Tablets auch mit Browsern, die nicht auf Webkit basieren (z.B. Google Chrome):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | /* iPhone 2,3,4 */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } /* iPhone 5 */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { } /* iPhone 6,7,8 */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { } /* iPhone PLUS 6,7,8 */ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) { } /* iPhone X */ @media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3), (min-resolution: 3dppx) { } /* iPad Mini */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1), (min-resolution: 1dppx) { } /* iPad 1,2 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } /* iPad 3,4 Retina, Samsung Galaxy S7+ */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { } |
Für Landscape-Mode ist jeweils diese Zeile einzufügen:
1 | and (orientation: landscape) |
Bonus: Media Query zur Sonderbehandlung von Internet Explorer 10++
Sollte in keiner Werkzeugkiste fehlen:
1 2 3 4 | /* IE 10++ */ @media all and (-ms-high-contrast:none) { } |
