Visual Viewport API
Access information about the visual viewport - the visible portion of a webpage. Particularly useful for mobile web development where the viewport changes due to zooming and UI elements.
Browser Support
Viewport Properties
Access key properties of the visual viewport like width, height, scale, and offset values. These properties help you understand exactly what portion of your page is currently visible to the user, which is especially important on mobile devices where users frequently zoom and pan.
Output
Click Run to see output...Viewport Events
Listen for resize and scroll events on the visual viewport to detect when users zoom, pan, or when the keyboard appears. These events let you respond in real-time to changes in what's visible on screen, allowing you to create interfaces that adapt instantly to user interactions.
Output
Click Run to see output...Responsive UI
Create UI elements that respond dynamically to changes in the visual viewport. This is perfect for building fixed-position elements that stay visible and usable even when users zoom in or when the virtual keyboard appears, ensuring your interface remains accessible in all situations.
Output
Click Run to see output...