PHPnews.io

8 Tips to Make Your Website Feel Like an iOS App

Written by Bram.us / Original link on Nov. 23, 2020

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 do suggest though:

  1. Fixate the header using position: sticky; instead of position: fixed;. No need for that extra margin on content then.

  2. Don’t set the header height to a fixed number, as not all devices have (equally sized) notches. Use User Agent Variable safe-area-inset-top instead.

    header {
      padding-top: env(safe-area-inset-top);
    }
  3. Don’t disable scaling if your app does not follow the system font sizing. To make it do so, you 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.

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

bram ios sitepoint calevans bram

« WPGraphQL – GraphQL Server for WordPress - Marbles2 - 23-Nov 2020 [devlog/marbles2] »