Zoom bei Eingabe des Suchbegriffs (iPhone 7/8)

Shopware 5 Allgemein
1

Moin,

ein Kunde möchte keinen Zoom der Seite in der mobilen Ansicht. Tritt wohl beim iPhone 7/8 auf, wenn ein Suchbegriff eingegeben wird.
Ist das im Theme verankert oder eine Funktion im iPhone?

Matthias

 

2

Mal so spontan auf der Apple-Website in den meta viewport geschaut, weil da zoomt nix bei der Suche. Von daher vielleicht den mal ausprobieren:

Gruß

Matt

3

Die Lösung lag in der index/header.tpl

Dort den „viewport“ wie folgt angepasst:

 

1 „Gefällt mir“
4

Die Einstellungen “maximum-scale=1.0, user-scalable=0” verhindern, dass Leute mit Sehschwäche in die Seite reinzoomen können. Daher werden diese Einstellungen schon länger nicht mehr empfohlen.

5

Hallo miteinander,

da mich dieses Verhalten ebenfalls nervt und eine Schmälerung der Usability vermute, wäre das hier vielleicht eine Lösung?

https://webdesign.weisshart.de/blog/2017/05/22/responsive-formulare-automatisches-zoomen-beim-betreten-vermeiden/

Grüsse

Sijandi

6

Also wenn müsste es 

input, textarea {
    font-size: 16px;
}

heißen, weil eine CSS-Property font-face gibt es nicht. Ich hab’s nicht ausprobiert, aber möglicherweise hilft es.

Gruß

Matt

7

Da an dieser Stelle der Code fehlt und vielleicht nochch einmal jemand danach suchen wird:

{extends file="parent:frontend/index/header.tpl"}

{block name='frontend_index_header_meta_tags_mobile'}
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="{if $theme.appleWebAppTitle != ""}{$theme.appleWebAppTitle|escapeHtml}{else}{{config name=sShopname}|escapeHtml}{/if}">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
{/block}

Die auskommentierte Zeile kann man natürlich auch löschen. Um das Ergebnis zu sehen, muss der Shop-Cache geleert werden. Gut Holz.

1 „Gefällt mir“