Antwort #395 am: 05. November 2019, 00:20:59
@Markus
Ich hab es nun endlich geschafft deinen Vorschlag
@media screen, (device-aspect-ratio: 2/3), (device-aspect-ratio: 40/71), (device-aspect-ratio: 375/667), (device-aspect-ratio: 9/16) {
select, textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"] {
font-size: 16px;
}
}
zu testen.
Es wird nicht mehr gezoomt in iOS bei Eingabefeldern.
Getestet mit:
iPhone 11 Pro in Safari, Chrome und Firefox
iPhone 5s, 6s und 7 nur mit Safari getestet
Ich find die Lösung aber nicht optimal, weil sie erstens nur etwas Zeit bringt, bis device-aspect-ratio nicht mehr unterstützt wird und zweitens weil es sicherlich auch Android Telefone mit diesen Seitenverhältnissen gibt. Vor allem 2zu3 und 9zu16 und dort dann unnötig die Schrift vergrößert wird.
Die einzigen Stellen wo es wirklich auffällt sind tatsächlich die Stellen, wo ein normales Eingabefeld auf ein Sumoselect Feld trifft. Also in der Registrierung bei Anrede und Land.
M.m.n. wäre die beste Lösung die Schrift für Eingabe und Sumoselect Felder komplett auf 16px zu erhöhen und die Boxen gegebenenfalls daran anzupassen. Dann hätte man eine Lösung, die auf iOS und Android gleich ist und bei iOS das zoomen verhindert.
Falls durch größere Inputfelder zuviel Platz benötigt wird bei der Registrierung zb., dann könnte man die Feldernamen auch in die Felder verlegen wie es zb hier gemacht wird:
Apple ID erstellen.
Ich hab bis auf Amazon wo trotz 15px nicht gezoomt wird (vielleicht ist die Seite mobil nochmal anders als die im Browser zusammengeschobene Desktopvariante) keine Große Seite gefunden die für die Suche Schriften kleiner 16px oder 1rem nutzt. Selbst Google nutzt 16px. Das muss doch daran liegen, dass sie das Zoomen verhindern wollen.
Oder spricht etwas ganz anderes gegen 16px für Eingabe und Sumoselect Felder?
Gruß Timm