Keyboard Viewport Resizing Demo

Demo

1. Install the app on your Android phone.
2. Tap one of the buttons below to change the viewport interactive-widget parameter.
   Resizes-visual
   Resizes-content
   Overlays-content
3. Tap the input field below to bring up the keyboard and see how the viewport reacts.

How it works

The viewport: interactive-widget parameter is only compatible with Chrome on Android. It lets you choose one of three options to control how the viewport behaves when an interactive widget partially covers it:

1. resizes-visual → The keyboard resizes the viewport but elements with a fixed position stay where they are (default).
2. resizes-content → The keyboard resizes the viewport, including elements with a fixed position.
3. overlays-content → The keyboard overlays the viewport, and nothing in the page is resized or moved.

Code

Links & Documentation

• Viewport Interactive Widget on MDN