Very nice video by Sam Selikoff in which he sets up a web manifest to make his site feel more app-like. Great production quality.
There are some tweaks I’d suggest though:
-
Fixate the header usingUpdate: See note belowposition: sticky;
instead ofposition: fixed;
. No need for that extramargin
on the content then. -
Don’t set the header
height
to a fixed number, as not all devices have (equally sized) notches. Use the User Agent Variablesafe-area-inset-top
instead, and apply it as the top padding:header { padding-top: env(safe-area-inset-top); }
-
Don’t disable scaling in case your app does not follow the system font sizing — which it does not by default. To make it do follow the system font sizing, use this snippet:
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }
💡 You can still override the
font-family
after that. That way you can have your custom font and also follow the preferred system Text Size
As an extra: to prevent that long-press behavior when the app is not added to the home screen, set -webkit-touch-callout: none;
on the links.
On Twitter Sam pointed me out that when using position: sticky;
there’s an issue with overscroll/bounce: The header will shift down along with the body as you do so.
In theory one could easily fix this by applying some overscroll-behavior
on the body
. However, as Safari does not support overscroll-behavior
you’ll have to resort to a hack to prevent overscrolling in Safari. But, as that hack relies on 100vh
— which Safari also doesn’t understand properly — you’ll have to use another hack to make Safari use the correct value for 100vh
.
(* mumbles something about Safari being the new IE6 *)
Thank me with a coffee.
I don\'t do this for profit but a small one-time donation would surely put a smile on my face. Thanks!
To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.