Some Native-Like Elements for Web Apps in Safari

Ria Pacheco - Apr 29 '22 -

There are small behaviours in web apps, initially overlooked, that make it feel less like an actual app when viewing through a mobile browser. Here are some meta tags / links to apply to your index page so you can make the site/app feel more like an app when viewed in Safari.

Remove Scaling

Sometimes you'll notice that the page will zoom in without your prompt, usually when you select a field or element of focus (like a form):

<!--Removed <meta name="viewport" content="width=device-width, initial-scale=1"> to make more app-like -->
<meta name="viewport" content="user-scalable=no, width=device-width" />

Change the iOS Status Bar

This is the bar that shows the device's battery life and network. You can change this by adding this meta tag; and change the color options with content, adding default, black, black-translucent:

<meta name="apple-mobile-web-app-status-bar-style" content="default"/>

The Moving Scroll

When you scroll to the very bottom or very top, and keep pulling the screen, you'll notice that the screen will tug a bit and reveal a default hidden layer. To stop this you can add the following script at the end of the body:

<script>
function BlockMove(event) {   event.preventDefault() ;  }
</script>

With this added to your <body> tag:

<body ontouchmove="BlockMove(event);">
  <!--App root code-->
</body>