Martijn Hols 4/4/2024

How to get the document height in iOS Safari when the on-screen keyboard is open

Read Original

This article addresses a specific iOS Safari quirk where the on-screen keyboard doesn't resize the viewport as expected, breaking normal methods of getting screen size. It provides a detailed solution using the `window.visualViewport` API, complete with a React hook (`useViewportSize`) to dynamically track the real viewport dimensions for creating layouts with fixed headers/footers that work with the keyboard.

How to get the document height in iOS Safari when the on-screen keyboard is open

Comments

No comments yet

Be the first to share your thoughts!

Browser Extension

Get instant access to AllDevBlogs from your browser

Top of the Week