CSS: Verhindere Zoom bei Input Focus (Safari - iOS)

iPhones, iPads und iPads sind ein tolles Stückchen Technik und ich habe selber sowohl ein iPhone als auch ein iPad im Einsatz. Was mich als Webentwickler jedoch tierisch aufregen kann ist, dass auf vielen Webseiten bei einem Klick in ein Inputfeld ein Zoom durchgeführt wird.

Nehmen wir also an man würde eine Webseite programmieren und ein bestimmtes Webdesign pflegen wollen, so achtet man in der heutigen Zeit nicht nur auf ein schickes Design auf dem Desktop, sondern auch im mobilen Format. Getrennte Webseiten zwischen einer mobilen und einer Desktopversion sind heutzutage eigentlich nicht mehr so üblich, aus diesem Grund setzt man eher auf ein Responsive Design.

Jetzt gibt es jedoch Webseiten, bei denen klickt man in irgendwelche Felder hinein und das Handy zoomt erst mal ein bisschen in das Feld hinein. Hierdurch möchte Apple, bzw. Safari, erreichen dass man die eingegebenen Texte, Zahlen oder Auswahlfelder besser lesen kann. Im Endeeffekt kann so ein Zoom aber auch ziemlich nerven, wenn man zum erreichen von weiteren Feldern jedes Mal wieder herauszoomen muss.

Dabei ist es eigentlich ganz einfach diesen Zoom zu verhindern.
Erst einmal sollte man für ein adäquates Responsive Design einen Viewport einstellen. Hierzu fügt man innerhalb des head-Tags ein:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Anschließend kommt der eigentliche Kniff. Wir müssen nämlich eigentlich nicht mehr machen, als die Textgröße aller Felder auf mindestens 16px einstellen.
Dies geht z.b. für alle Freitexteingabefelder so:

textarea, input{
    font-size: 17px;
}

Wer jetzt denkt dass es da einen Haken geben könnte, der irrt. Das ist tatsächlich alles gewesen. Es geht eigentlich nur darum Safari zu zeigen, dass der Nutzer die Texte auch ohne einen automatischen Zoom lesen könnte. Dies erreichen wir in dem wir die Textgröße auf mindestens 16 Pixel einstellen. Ich wünsche viel Spaß beim coden und designen.