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>
Top comments (0)