DEV Community

Ria Pacheco
Ria Pacheco

Posted on

2 2

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay