Viewport: interactive-widget

This feature is not (yet) supported on your device

The content attribute of the viewport meta tag is used to control how the viewport of the page behaves when an interactive widget like an on-screen keyboard is shown.

Example: <meta name="viewport" content="interactive-widget=resizes-visual">

interactive-widget can take the following values:

• resizes-visual: The keyboard resizes the Visual Viewport, the content of the page may be pushed up when the keyboard is shown. Elements with position: fixed will remain in place and can be obscured by the keyboard.
• resizes-content: The keyboard resizes the both the Visual Viewport and the Layout Viewport, the content of the page may be pushed up when the keyboard is shown. Elements with position: fixed will can be pushed up as well.
• overlays-content: The keyboard overlays the viewport and both the Visual Viewport and the Layout Viewport will not be resized, the content of the page will remain in place.

Demo

Tap the textfield below to show the on-screen keyboard. Change the value of "interactive-widget" with the radio buttons to see how the keyboard interacts with the viewport.

<meta name="viewport" content="interactive-widget=resizes-visual"> <meta name="viewport" content="interactive-widget=resizes-content"> <meta name="viewport" content="interactive-widget=overlays-content">

Documentation

Interactive widget on MDN

Viewport resize behavior on Chrome Developers

Browser support

The interactive-widget part of the content attribute of the viewport meta tag is supported in Chrome on Android.