Shop 5.5.3 / Eingabefelder auf IOS zoomt immer :-(

[ple]

Hallo zusammen,
ich bräuchte mal ein wenig Schwarmwissen, da ich ein Problem habe, was mir doch sehr auf die Nüsse geht und das tritt anscheinend nur bei Apple IOS Geräten auf mit dem Safari Browser.
Ich nutzte ein Iphone 12 pro und jedes mal, wenn ich eine Eingabebox anklicke zoomt Safari etwas in die Seite und danach ist die Seite dann nach links und rechts verschiebbar. Ich muss dann immer wieder rauszoomen.
Das tritt sowohl bei Stückzahl eingeben auf als auch beim Login oder sonst wo.

Was ich so gelesen habe, soll das wohl ein Feature von IOS sein, damit die Schrift der Eingabe halt eine passende Größe hat.
Ich habs mal auf einen Xiaomi mit Android in Chrome getestet, da passiert das nicht.
Frage, kann man das unterbinden, oder gibt es dafür eine andere Lösung?

Gruß und Besten Dank.

 

[Morimus]

Wenn ich mich nicht täusche, ist das das Standardverhalten unter iOS, wenn Textfelder eine Schriftgröße unter 15 px haben.
Mit Bordmitteln lässt sich das natürlich nicht ändern.

Mit CSS ist das aber gut lösbar.

edit: oder mit @css-umsetzung hilfe

 

[ple]

Puh, dann müsste ich ja alle selectoren rausfinden um das mit css zu machen.
Oder weiß zufällig jemand, welche Variable ich in der variablen css im Child ich überschreiben könnte?

 

[css-umsetzung]

@Morimus

Du bist heute mein Held 🙂
Ich gestehe, ich wusste das selbst nicht, jetzt werde ich das niemals mehr vergessen.

Die Größe muss nach eigenen Recherchen min. 16px sein.
https://defensivecss.dev/tip/input-zoom-safari/

Es ginge auch über einen Meta Eintrag aber in Zeiten der Barrierefreiheit sollte man das lassen.

 

[ple]

Besten Dank für den Input.
Ich hatte zunächst es versucht mittels CSS, aber da verhaut mir immer irgendwas, sei es Mobil oder auf dem Desktop. Schwierig alle passenden Stellen und zusammenhänge zu finden.
Mittels Meta im Head war es dann recht einfach, ob google mich dafür abstraft, kein Plan.

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

 

[css-umsetzung]

Mittels Meta im Head war es dann recht einfach, ob google mich dafür abstraft, kein Plan.

Damit bist du nicht mehr Barierefrei.
Das wird vermutlich auch Google nicht gefallen.

Ich kann mir nicht vorstellen, dass ein

body .form-control {
    font-size:16px !important;
}

die Seite zerhackt.

 

[ple]

Ganz zerhacken nicht, ist schon ein wenig herausfordern die zwischenhänge zu verstehen und zufinden, aber macht Spaß. Die Stunden darf man natürlich nicht rechnen, aber ich will ja auch ein wenig was lernen.
Ich hatte ein paar Stellschrauben versucht.

$font-size-base:                    rem(16px) !default;
$font-size-lg:                      rem(30px) !default;
$font-size-sm:                      rem(20px) !default;
$font-size-xs:                      rem(20px) !default;
$input-btn-font-size-sm:              rem(20px) !default;

Die wirken sich auf den kompletten Shop aus, aber leider zoomt ios da immer noch rein.

Mittels css ging es dann. Ist nicht 100% sauber, aber schon mal ein Anfang.

@media (max-width: 991px) {

body .form-control {
    font-size:19px !important;
}
.form-counter .form-control {
    height: calc(calc(1.65em + 1.25rem + 2px) - 10px);
}

.input-group-sm .input-group-prepend {
    height: calc(1.5em + 0.75rem + 10px);
}

.form-counter {
    max-height: calc(1.65em + 1.25rem + 10px) !important;
}
}

besten Dank schon mal im voraus für die Tipps.