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

2
Introducing RSC Explorer
Dan Abramov 1 votes
4
Fragments Dec 11
Martin Fowler 1 votes
5
Adding Type Hints to my Blog
Daniel Feldroy 1 votes
6
Refactoring English: Month 12
Michael Lynch 1 votes
8
10
You Gotta Push If You Wanna Pull
Gunnar Morling 1 votes