CSS iPhone Media Query

Durch ein CSS iPhone Media Query kann man Webseiten für Smartphones optimieren. CSS Regeln sind dafür zuständig die Gestaltung der Webseite festzulegen. Wie breit und lang sind verschiedene Elemente? Welche Schriftart und Farbe besitzen Texte? All dies kann durch CSS eingestellt werden.

Innerhalb des folgenden Codes kann man die eigenen CSS Regeln speziell für iPhones definieren. Diese Regeln greifen nur bei einer Bildschirmbreite von 375 bis 667 Pixeln.

Es gibt auch noch extra Media Queries um Tablets, Full HD Monitore oder auch 4k Modelle zu optimieren. Dort verändert sich dementsprechend lediglich die Bildschirmbreite innerhalb des Codes.

iPhone 6 Code

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {

}

Neuere iPhone Modelle

Hier findet man auch das neue iPhone X oder das 8er Modell:

http://stephen.io/mediaqueries/

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Scroll to Top