How to ask a (mobile) browser about the true visual viewport

The Visual Viewport API enables developers to access the actually visible area of the page. This differs from the normal viewport Show archive.org snapshot if:

• the user has pinch-zoomed
• the on-screen keyboard is visible
• there are other page-independent artifacts

Obtain a VisualViewport from window.visualViewport. The object has the properties offsetLeft and offsetTop, and three events: resize, scroll, scrollend. You can use these to place and keep an element within the visual viewport. See the MDN link for details and examples.