Blog Logo Screenlight Blog

Mobile Browser automatischen Zoom bei Textfeldern verhindern

iphone-zoom

Ein sinnvoller Trick das automatische zoomen bei Textfeldern auf dem iPhone zu verhindern.

Responsive Desgin ist in aller Munde und wird zur Freude aller mobilen Web-Surfern bei immer mehr Webseiten angewendet. Das Design- und Entwicklungsteam hat sich grosse Muehe gegeben, alle Inhalte auf jeder groesse moeglichst gut zu praesentieren. Selbst das Kontaktformular wurde fuer mobile Endgeraete angepasst. Leider merkt das iPhone das nicht und glaubt, dass es uns hilft, wenn es beim :focus eines Textfelds die Seite vergroessert. Dadurch ensteht der ungewollte Effekt, dass ein schon gross gestaltetes Eingabefeld so gross wird, dass man gerade mal drei bis vier Buchstaben sehen kann.

Eine benutzerunfreundliche Moeglichkeit

Ein sehr einfacher Weg um das zu verhindern bieten die Meta-Tags.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

Leider wird mit der Angabe “user-scalable=no” jegliches zoomen verhindert. Aber wir wollen nur ungern dem Benutzer eine Funktion wegnehmen.

Die bessere, benutzerfreundliche Alternative

input[type="text"], input[type="textarea"] { font-size: 16px; }

Mit dieser Angabe zoomt der Browser beim :focus des Textfelds nicht mehr.

Leave a Response

No comments so far, would you like to be the first?