DEV Community

Ria Pacheco
Ria Pacheco

Posted on

Some Native-Like Elements for Web Apps in Safari

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" />
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

With this added to your <body> tag:

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

Top comments (0)