# Zoom bei Eingabe des Suchbegriffs (iPhone 7/8)

**URL:** <https://forum.shopware.com/t/zoom-bei-eingabe-des-suchbegriffs-iphone-7-8/61783>\
**Category:** Allgemein\
**Created:** [16. September 2019 um 08:02 UTC](https://forum.shopware.com/t/zoom-bei-eingabe-des-suchbegriffs-iphone-7-8/61783 "2019-09-16T08:02:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bluewolf](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/bluewolf/32/7886_2.png) [@bluewolf](https://forum.shopware.com/u/bluewolf)\
**Post date:** [16. September 2019 um 08:02 UTC](https://forum.shopware.com/t/zoom-bei-eingabe-des-suchbegriffs-iphone-7-8/61783/1 "2019-09-16T08:02:34Z")

</div>

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

&nbsp;

---

<div class="post-metadata">

**Author:** ![msslovi0](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@msslovi0](https://forum.shopware.com/u/msslovi0)\
**Post date:** [16. September 2019 um 08:08 UTC](https://forum.shopware.com/t/zoom-bei-eingabe-des-suchbegriffs-iphone-7-8/61783/2 "2019-09-16T08:08:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bluewolf](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/bluewolf/32/7886_2.png) [@bluewolf](https://forum.shopware.com/u/bluewolf)\
**Post date:** [23. September 2019 um 13:36 UTC](https://forum.shopware.com/t/zoom-bei-eingabe-des-suchbegriffs-iphone-7-8/61783/3 "2019-09-23T13:36:17Z")

</div>

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

Dort den „viewport“ wie folgt angepasst:

&nbsp;

---

<div class="post-metadata">

**Author:** ![naturdrogerie](https://avatars.discourse-cdn.com/v4/letter/n/b5ac83/32.png) [@naturdrogerie](https://forum.shopware.com/u/naturdrogerie)\
**Post date:** [23. September 2019 um 14:01 UTC](https://forum.shopware.com/t/zoom-bei-eingabe-des-suchbegriffs-iphone-7-8/61783/4 "2019-09-23T14:01:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Drachenhort](https://avatars.discourse-cdn.com/v4/letter/d/f04885/32.png) [@Drachenhort](https://forum.shopware.com/u/Drachenhort)\
**Post date:** [1. Oktober 2019 um 16:35 UTC](https://forum.shopware.com/t/zoom-bei-eingabe-des-suchbegriffs-iphone-7-8/61783/5 "2019-10-01T16:35:06Z")

</div>

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/](https://webdesign.weisshart.de/blog/2017/05/22/responsive-formulare-automatisches-zoomen-beim-betreten-vermeiden/)

Grüsse

Sijandi

---

<div class="post-metadata">

**Author:** ![msslovi0](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@msslovi0](https://forum.shopware.com/u/msslovi0)\
**Post date:** [1. Oktober 2019 um 18:36 UTC](https://forum.shopware.com/t/zoom-bei-eingabe-des-suchbegriffs-iphone-7-8/61783/6 "2019-10-01T18:36:20Z")

</div>

Also wenn müsste es&nbsp;

```
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

---

<div class="post-metadata">

**Author:** ![great2gether](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/great2gether/32/12887_2.png) [@great2gether](https://forum.shopware.com/u/great2gether)\
**Post date:** [12. Oktober 2021 um 04:34 UTC](https://forum.shopware.com/t/zoom-bei-eingabe-des-suchbegriffs-iphone-7-8/61783/7 "2021-10-12T04:34:06Z")

</div>

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

```auto
{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.