Progressive Web App☟

Usage

This is a small little page to explore browser behaviours in regards to fullscreen webpages and Progressive Web Apps (PWAs).

Viewport

Setup

<body>
   <header></header>
   <main></main>
   <footer></footer>
</body>

Style


Normally scrolling body (with fixed header and footer)

Full-height body and scrolling main (with fixed header and footer)

Text input

Take a look at what happens when an input field is focussed.

Viewport units

vh
svh
dvh
lvh
vw
svw
dvw
lvw

Safe Area Insets

safe-area-inset-top
safe-area-inset-bottom
safe-area-inset-right
safe-area-inset-left

Fixed Elements

bottom right
bottom left
top right
top left