# Aktuellen viewport in TPL abfragen

**URL:** <https://forum.shopware.com/t/aktuellen-viewport-in-tpl-abfragen/38125>\
**Category:** Themes & Design\
**Created:** [12. Juli 2016 um 07:00 UTC](https://forum.shopware.com/t/aktuellen-viewport-in-tpl-abfragen/38125 "2016-07-12T07:00:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![delivinos](https://avatars.discourse-cdn.com/v4/letter/d/ed8c4c/32.png) [@delivinos](https://forum.shopware.com/u/delivinos)\
**Post date:** [12. Juli 2016 um 07:00 UTC](https://forum.shopware.com/t/aktuellen-viewport-in-tpl-abfragen/38125/1 "2016-07-12T07:00:30Z")

</div>

Guten Morgen,

ich möchte gerne in einer TPL (in dem Fall in der search.tpl) den Viewport abfragen, um das Suchfeld unterschiedlich zu initiieren.&nbsp;Ist das möglich?

Abhängig vom Viewport hätte ich gerne eine unterschiedliche Einstellung des Suchfelds.&nbsp;&nbsp;Die search.tpl habe ich bereits angepasst&nbsp;

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

        {* Search field *}
		{block name='frontend_index_search_field'}
        	
		{/block}

```

Klappt perfekt auf viewport Desktop, beim Aufrufen der Shopseiten auch auf Tablets oder Mobiles. Auf den viewports führt es aber zu einem ungewollten Verhalten&nbsp;beim Öffnen der Detailsansicht eines Bildes (die Tastatur erscheint dann unnötigerweise). Ich würde diese Anpassung daher gerne nur auf Desktops aktivieren.&nbsp;

Hat jemand eine Idee? In der Doku und im Forum habe ich leider nichts dazu gefunden.

Mit besten Dank im Voraus!

Viele Grüße

Peter

---

<div class="post-metadata">

**Author:** ![t2oh4e](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@t2oh4e](https://forum.shopware.com/u/t2oh4e)\
**Post date:** [12. Juli 2016 um 07:12 UTC](https://forum.shopware.com/t/aktuellen-viewport-in-tpl-abfragen/38125/2 "2016-07-12T07:12:32Z")

</div>

Es&nbsp;wird auf alle Viewports die selbe HTML-Struktur ausgeliefert. Auf Template-Ebene kannst du das nicht anpassen.

Unterschiedliche Attribute für das Input-Feld kannst du am sinnvollsten über ein jQuery-Plugin und den Statemanager lösen.

Nähere Infos dazu findest du hier:&nbsp;[jQuery plugins and the StateManager](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/)

---

<div class="post-metadata">

**Author:** ![AlexG](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@AlexG](https://forum.shopware.com/u/AlexG)\
**Post date:** [12. Juli 2016 um 07:20 UTC](https://forum.shopware.com/t/aktuellen-viewport-in-tpl-abfragen/38125/3 "2016-07-12T07:20:14Z")

</div>

Habe mir selbst einmal ein less/css snippet zusamengebaut das genau das macht was du benötigst:

```
body:after {
  content: 'Phone Portrait';
  position: fixed;
  bottom: 3px;
  left: 3px;
  background: @brand-primary;
  border: 1px solid darken(@brand-primary, 10%);
  padding: 4px;
  color: #fff;
  font-size: 12px;
  opacity: 0.7;
  z-index: 9999;
  pointer-events: none;
}

@media screen and (min-width: @phoneLandscapeViewportWidth) {
  body:after {
    content: 'Phone Landscape >480px';
  }
}

@media screen and (min-width: @tabletViewportWidth) {
  body:after {
    content: 'Tablet Portrait >768px';
  }
}

@media screen and (min-width: @tabletLandscapeViewportWidth) {
  body:after {
    content: 'Tablet Landscape >1024px';
  }
}

@media screen and (min-width: @desktopViewportWidth) {
  body:after {
    content: 'Desktop >1260px';
  }
}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![delivinos](https://avatars.discourse-cdn.com/v4/letter/d/ed8c4c/32.png) [@delivinos](https://forum.shopware.com/u/delivinos)\
**Post date:** [12. Juli 2016 um 07:53 UTC](https://forum.shopware.com/t/aktuellen-viewport-in-tpl-abfragen/38125/4 "2016-07-12T07:53:22Z")

</div>

Besten Dank für die schnellen Antworten. Das werde ich dann mal (beides) ausprobieren.&nbsp;

Gruß

Peter&nbsp;