16px oder größerer Text verhindert den Zoom auf iOS-Formularen 

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Das war ein großartiges „Heute habe ich gelernt“ von Josh W. Comeau. Wenn die font-size eines <input> 16px oder größer ist, zoomt Safari auf iOS normal in das Eingabefeld. Aber sobald die font-size 15px oder weniger beträgt, zoomt die Ansicht in dieses Eingabefeld. Vermutlich, weil es diesen Typ als zu klein betrachtet und möchte, dass Sie sehen, was Sie tun. Also zoomt es hinein, um Ihnen zu helfen. Barrierefreiheit. Wenn Sie das nicht möchten, machen Sie die Schriftgröße groß genug.

Hier ist Joshs exakter Pen, wenn Sie selbst damit spielen möchten.

Im Allgemeinen mag ich diese Funktion. Sie hilft den Leuten zu sehen, was sie tun, und entmutigt extrem kleine Schriftgrößen. Was ein wenig ärgerlich ist – und ich mache hier niemandem Vorwürfe –, ist, dass nicht alle Schriftarten in Bezug auf die Lesbarkeit bei verschiedenen Größen gleich gut sind. Hier ist zum Beispiel San Francisco im Vergleich zu Caveat bei 16px.

San Francisco links, Caveat rechts. Caveat sieht optisch viel kleiner aus, obwohl die font-size gleich ist.

Sie können dieses Beispiel im Debug-Modus ansehen, um es selbst zu sehen und die Schriftgröße zu ändern, um zu sehen, was zoomt und was nicht.

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Johan
    Permalink zum Kommentar#

    Ich hätte in dieser Hinsicht gerne etwas mehr Kontrolle. Entweder deaktiviert man das Zoomen komplett (Barrierefreiheitskatastrophe!) oder man muss mit der Einstellung von 16px leben (was kaum Platz zum Anzeigen komplexer Inhalte lässt). Es gibt kein dazwischen.

  2. Luis Hernandez
    Permalink zum Kommentar#

    Es gibt eine Möglichkeit, dies zu umgehen, indem man transform: scale($target_font_size / 16); font-size: 16px; verwendet.

    Es erfordert einige Tricksereien mit dem Label, um sicherzustellen, dass das gesamte Eingabefeld weiterhin klickbar ist.

  3. Maurice
    Permalink zum Kommentar#

    Ich habe diese Methode auch schon seit geraumer Zeit verwendet, bin aber vor einigen Monaten davon abgewichen. Die Festlegung eines Minimums von 16px für meine Formularsteuerelemente fühlte sich in vielen Fällen unausgewogen mit der Schriftgröße des Körpers an. Mit ein wenig Hilfe von Google und Stack Overflow habe ich herausgefunden, dass die Einstellung von maximum-scale=1 für mein viewport das Zoomen verhindert, unabhängig von der Schriftgröße des Formularsteuerelements. Ich habe keine Nachteile bei der Verwendung gefunden. Benutzer dürfen beispielsweise immer noch auf Seiten zoomen. Schauen Sie sich diesen Pen an.

  4. Manuel
    Permalink zum Kommentar#

    @Maurice, iOS10 und höher ignorieren maximum-scale, minimum-scale und user-scalable, da sie missbraucht wurden. Das ist der Grund, warum es zu funktionieren scheint. Andere Geräte können möglicherweise nicht zoomen/skalieren, da sie sich an die ihnen gegebenen Regeln halten.
    Es ist also vielleicht besser, es wieder zu entfernen.

  5. Ivan
    Permalink zum Kommentar#

    @Manuel, Sie können es in einen CSS.supports-Aufruf für „Mobile Safari“-Funktionen einwickeln.

    // This prevents iOS zoom on focused form elements with font size smaller than 16px.
// iOS 10+ allows pinch-zoom even if viewport is unscalaeable.
// We feature detect those browsers and apply additional rules.
    if (
        window.CSS?.supports?.(
            '(font:-apple-system-body) and (-webkit-touch-callout:none) and (-webkit-tap-highlight-color:hotpink)'
        )
    ) {
        const viewport = document.querySelector('meta[name="viewport"]');
        if (viewport !== null) {
            viewport.content = `${viewport.content},user-scalable=no`;
        }
    }
  6. Jeffery To
    Permalink zum Kommentar#

    Wie Luis Hernandez erwähnte, gibt es eine reine CSS-Lösung mit der scale()-Transformation, die es Ihnen ermöglicht, Schriftgrößen kleiner als 16px zu verwenden, ohne das Seitenzoomen deaktivieren zu müssen.

    Ich habe eine StackOverflow-Antwort, die die Technik beschreibt, und einen Blogbeitrag, der etwas detaillierter darauf eingeht: Kein Input-Zoom in Safari auf dem iPhone, der Pixel-perfekte Weg.

  7. Jon
    Permalink zum Kommentar#

    Ich glaube, ich habe gerade eine bessere Lösung als die geposteten gefunden. Ich habe sie hier auf Stack Overflow gepostet…

    https://stackoverflow.com/a/69353771/56007

  8. Aymane Lassfar
    Permalink zum Kommentar#

    Ich habe user-scalable=no verwendet und es verhindert das Standardzoomen auf iOS-Geräten, wie folgt:

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

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.

© .