Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Responsive Formulare - automatisches Zoomen beim Betreten vermeiden

Montag, 22. Mai 2017

Da hat man sich redlich Mühe gegeben, Formulare responsive zu gestalten. Auf dem Smartphone / iPhone sieht das Ergebnis auch bestens aus.

Screenshot 1
Ein Kontaktformular, optimiert für die Darstellungen auf einem Smartphone-Monitor

Nach dem Antippen eines Formularfeldes aber:

Screenshot 2
Nach dem Antippen eines Formularfelds öffnet sich die Bildschirmtastatur, und die Anzeige wird automatisch gezoomt, so dass sie auf dem Bildschirm nicht mehr zur Gänze sichtbar ist

Was passiert da? Wie kann man diesen unschönen Effekt vermeiden?
iOS oder Android versuchen, die Eingabefelder mit einer Mindestschriftgröße darzustellen. Falls diese Mindestgröße nicht vorgegeben ist (per CSS), dann kommt es zu diesem Zoom-Effekt.
Abhilfe? Ins CSS:
input, textarea {font-face:16px}
So einfach kann es sein - wenn man's weiß.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE