Zenit Design - Themes
Theme kaufenThemesSupport
DE
DE
  • Erste Schritte
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tipps
    • Dashboard
    • Theme Konfiguration
    • Lexikon
    • Mehrere Verkaufskanäle
  • Vorlagen
  • Support
    • Error auslesen
    • Ursache finden
  • 🎨Styling
    • Allgemein
      • Grundlayout
      • Produktbilder
      • Produkt Layout-Typ
      • Globales Hintergrundbild
      • Preloader
      • Akzentlinie
      • Scroll Animation
    • Typografie & Farben
      • Theme-Farben
      • Status-Ausgaben
      • Schriftarten
      • Typografie
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Suche
      • Top Bar
      • Shop Navigation
      • Main Navigation
      • Flyout Navigation
      • Dropdown Navigation
    • Footer
      • Footer
      • Inhalte
      • Spalten
      • Spalten Styling
      • Unterer Footer
    • Elemente
      • Sidebar
      • Sidebar Navigation
      • Formulare
      • Bild- & Galerie-Slider
      • Produkt Slider
      • Kategorie Listing Slider
      • Paginierung
      • Breadcrumbs
      • Cookie Banner
      • Offcanvas
      • Backdrop
      • Scroll-Up Button
    • Kategorie
      • Kategorie-Header
      • Hero Sektion
      • Filter
      • Listing Actions
      • Produkt-Boxen
      • Quickview
    • Produkt
      • Details
      • Galerie
      • Beschreibung
      • Beschreibung Navigation
      • Beschreibung Inhalt
    • Kasse
      • Warenkorb
      • Kasse
  • ⚙️Einstellungen
    • Grundeinstellungen
    • Zusatzfeld Zuweisung
      • Zusatzfelder für Details auf der Produktseite
      • Zusatzfelder für Produkt-Datenblätter
    • Social Media Icons
    • Marketing Text Slider
    • Custom Tab Detailseite
    • Custom Spalten (Footer)
    • Eigener Code
  • 📂Inhalte
    • Erlebniswelten
      • Sektionen
      • Blöcke
        • Elemente
          • Bild Text Slider
          • Suche Banner
          • Text Banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Trenner
          • Kategorie-Navigation
          • Footer-Navigation
          • Platzhalter
        • Commerce
          • Galerie und Buybox mit Produktname & Hersteller-Logo
          • Galerie und Buybox mit Produktname & Hersteller-Logo & Beschreibung
          • Galerie und Buybox mit Beschreibung
          • Galerie mit Beschreibung und Buybox mit Produktname & Hersteller-Logo
        • Kategorie
          • Kategorie Listing
        • Spalten
        • Layouts
      • Block Innen-Abstände
      • Block Außen-Abstände
      • Animation
      • Erlebniswelt Beispiel
      • CSS-Variablen
    • Kategorieseite
      • Hero Sektion
      • Kategorie Header
      • CSS-Klassen
      • Kategorie Labels
      • Kategorie Icons
      • Produkte pro Zeile
    • Produktseite
      • Layouts
      • Standardlayout
      • Galerie Modus
      • Custom Tabs
      • Videos Tab
      • Datenblätter
    • Produktbilder
      • Bildgrößen
      • Bildformat
      • Dateiformat
      • Produktbilder Hintergrund
    • Layout-Typ
    • Responsive Tabellen
    • Mehrsprachigkeit
  • 🎓Tutorials
    • Demodaten importieren
    • Demo-Themekonfiguration importieren
    • Child-Theme duplizieren
    • Individuelle Anpassungen
    • Konfiguration export/import
    • Zusatzfelder export/import
    • Schriften lokal einbinden
    • Schriften lokal einbinden mit Child-Theme
  • 🛠️Update Guides
    • Child-Theme Update
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Shopware 6.4.8.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Übersicht
    • Barrierefreiheit
      • Typografie
      • Farben
      • Bilder
      • Video
      • Checker-Tools und Ressourcen
    • Allgemein
      • Copyright-Hinweis
      • Merkzettel
    • Produkt Layout
    • Lizenzen
      • Testversion vs Vollversion
      • Lizenzdomain ändern
    • Ableitungen
      • Child-Theme
      • Theme-Duplikat
      • Child-Theme vs Theme-Duplikat
    • Updates
      • Theme wird als inkompatibel angezeigt
      • Update wird nicht angezeigt
    • Fehler
      • Child-Theme kann nicht zugewiesen werden
      • Textbausteine zeigen technischen Namen
      • Theme Speichern Fehler
      • SVG Logo wird nicht angezeigt
      • Suche / Input mobile Zoom
      • Text ist nicht sichtbar / lesbar
Powered by GitBook
On this page
  • Problembeschreibung
  • Erläuterung
  • Lösungsvorschlag

Was this helpful?

  1. FAQ
  2. Fehler

Suche / Input mobile Zoom

Last updated 1 year ago

Was this helpful?

Problembeschreibung

Der mobile Safari-Browser auf iOS Geräten zoomt in die Seite, wenn in ein Input-Feld wie etwa die Suche per Touch-Eingabe geklickt wird. Das ist nicht etwas ein Bug, sondern ein Feature des Apple Browers. Ist die Schrift im Input-Feld wie etwas der Suche kleiner als 16px, versucht der mobile Safari die Lesbarkeit in dem Feld zu optimieren, indem er in die Seite hineinzoomt.

Ärgerlich ist jedoch, dass beim Verlassen des Eingabe-Feldes der Browser nicht auch automatisch wieder herauzoomt.

Erläuterung

Das Problem wurde auch schon auf Stackoverflow behandelt und ist kein Shopware spezifisches Problem.

Das Verhalten lässt sich ebenfalls im Standard-Theme von Shopware 6 beobachten:

Lösungsvorschlag

Nach dem aktuellen Stand gibt es keine allgemeine Lösung für dieses Verhalten. Überlegungen die Zoom-Funktion der Seite komplett zu sperren würde andere Probleme in der Usability (Benutzbarkeit) nach sich ziehen.

Die wohl einfachste Lösung ist es, die Eingabe-Felder mit einer Mindestschriftgröße von 16px zu versehen. In der Theme-Konfiguration unter Elemente > Formulare > Grundeinstellungen im Feld Schriftgröße (1) kannst Du diese auf 16px stellen.

Bereits unter Shopware 5 wurde dies im Issue-Tracker von Shopware bemängelt:

❓
https://issues.shopware.com/issues/SW-24520
Disable Auto Zoom in Input "Text" tag - Safari on iPhoneStack Overflow
Logo
Zoom-Funktion des Browser Safari bei Input-Feldern