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):

/* 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:

and (orientation: landscape)

Bonus: Media Query zur Sonderbehandlung von Internet Explorer 10++

Sollte in keiner Werkzeugkiste fehlen:

/* IE 10++ */
@media all and (-ms-high-contrast:none) {
  
}