Patch file | IOS: Make your website run in the form of an application.

Aug 23, 2023#t102

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

This text explains how to insert meta tags into the page source code to customize the behavior and appearance of a website in Safari browser. The meta tags allow for full-screen mode, hiding the browser toolbar, and changing the status bar color. The installation and usage instructions involve adding the website to the home screen and opening it in a separate window instead of using bookmarks.

Insert the following meta tags in the page source code:

<meta name="apple-mobile-web-app-capable" content="yes">

↑, Set to 'yes' to run in full-screen mode, without redirecting to the browser and without displaying the top and bottom toolbars.

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

↑, Set the status bar color (requires adding the first tag first), with optional values of 'default / black-translucent / black'.

Introduction (translated from Apple official documentation):
If the content is set to 'default', the status bar will display normally. If set to 'black', the status bar will display a black background. If set to 'black-translucent', the status bar will be black and translucent.
If set to 'default' or 'black', the webpage content will be displayed below the status bar. If set to 'black-translucent', the webpage content will be displayed on the entire screen, with part of it covered by the status bar.
The default value is 'default'.

Installation and Usage:

Safari browser -> Share -> Add to Home Screen

Click on the website icon on the desktop, and the website will run independently in a new window, instead of opening as a bookmark in the browser.