Prevent virtual keyboard overlaying content with the Interactive Widget meta tag

The interactive-widget property (as part of the viewport meta tag) can change the way the layout of a website adapts when the virtual (onscreen) keyboard is shown.

MDN lists three possible values:

• resizes-visual
• resizes-content
• overlays-content

You might want to play around with the different values to see which one fits your purpose.

In our case, we chose resizes-content. If the keyboard is shown, the remaining layout is adapted to the content viewport instead of obscurred.

You can see the difference here:

With `resizes-content`

Without `resizes-content`

Open the product page on Geizhals.at if you want to further inspect the layout.