apple-mobile-web-app-capable
A feature you may not know: web single-page applications can run as standalone apps on mobile phones.
Like below,
- no up and down toolbar
- Switching is no different from normal apps
Apple’s official
Description of available meta tags for safari
Safari HTML Reference – Supported Meta Tags
Just add the following line
<!--both ios and Android support--> <meta name="apple-mobile-web-app-capable" content="yes"> <!--Android support only--> <meta name="mobile-web-app-capable" content="yes">
Add meta tags, open Google Chrome, click Add to Home Screen, restart, and realize automatic full screen (there is no address bar at the bottom).
apple-mobile-web-app-capable If content is set to yes, the application will run in full screen mode, otherwise it will not run in full screen.
At the same time, it is also necessary to match
<meta name="apple-mobile-web-app-status-bar-style" content="default">
apple-mobile-web-app-status-bar-style is used to define the text color of the status bar, the optional values are defaultblack-translucentblack
black-translucent is transparent, when the content scrolls, you can see the content below through the status bar.
defaultblack is opaque, and the content below cannot be seen.
default is white black is black black-translucent is gray translucent
If you are not at ease, then cooperate with the following meta to change the top status bar to white.
<meta name="theme-color" content="#fff">
You can refer to my other article: “Set the color of the status bar at the top of the web page in Safari15 browser”
The above meta will only take effect when you add this page to your home screen.
Note This function requires your page or project to be a single-page application, such as a vue project. If it is a project with multiple html pages, it is very unfriendly when using it, like this: (When jumping, there will be more toolbars above and below)
Add a desktop icon
With this functionality, we also need to add an icon displayed on the desktop to the standalone web page.
<!-- custom application name --> <meta name="application-name" content="wubin.work"> <!-- custom icon --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="%PUBLIC_URL%/icon.ico">
There will be a problem with the app icon size. Generally, 120*120 is used. Of course, different sizes will be used for different devices: the following is the detailed size
A brief summary:
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="theme-color" content="#fff">
You can also configure the startup animation
<!-- apple-touch-startup-image is used to configure startup animation --> <!-- It should be noted here that the size of the picture here must correspond exactly to the display size of the device's static picture, and a difference of one pixel will cause the startup animation to fail to display --> <!-- The following lists all the sizes of the iPhone (ps: for the convenience of everyone, all are posted!!) --> <!-- iPhone 678 startup image @2x--> <link href="%PUBLIC_URL%/750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple- touch-startup-image"> <!-- iPhone 678p startup image @3x--> <link href="%PUBLIC_URL%/1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" rel="apple- touch-startup-image"> <!-- iPhone X Xs startup image @3x--> <link href="%PUBLIC_URL%/1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple- touch-startup-image"> <!-- iPhone XR startup image @2X --> <link href="%PUBLIC_URL%/828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple- touch-startup-image"> <!-- iPhone XR Max startup image @3x--> <link href="%PUBLIC_URL%/1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple- touch-startup-image">
Add page to desktop on IOS phone
The specific steps are as follows:
The point is to open it in safari, then click the share in the middle and find “Add to Home Screen”
Full screen available on PC
<template> <button @click="handleClick">Toggle full screen mode</button> </template>
const handleClick = () => {
if(document. fullscreenElement) {
document. exixFullscreen()
} else {
document.documentElement.requestFullscreen()
}
}
Listen for fullscreen events:
// Method 1
document.onfullscreenchange = () => {
// do something
}
// method 2
document.addEventListener('fullscreenchange', () => {
// do something
})
| w3c standard | Firefox | IE | ||
|---|---|---|---|---|
| set to full screen mode | requestFullScreen | webkitRequestFullScreen |
mozRequestFullScreen |
msRequestFullScreen |
| Exit full screen mode | exitFullscreen | webkitExitFullscreen | mozCancelFullScreen | msExitFullscreen |
| Elements of current fullscreen mode |
fullscreenElement |
webkitFullscreenElement |
mozFullScreenElement |
msFullscreenElement |
Fullscreen API reference link: Fullscreen API – Web API Interface Reference | MDN
Avoid jumping to the safari browser in ios full screen mode to be tested code:
//Mobile Safari in standalone mode
if (("standalone" in window.navigator) & amp; & amp; window.navigator.standalone) {
// If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
var noddy,
remotes = false;
document. addEventListener('click', function(event) {
noddy = event. target;
//Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
while (noddy.nodeName !== "A" & amp; & amp; noddy.nodeName !== "HTML") {
noddy = noddy. parentNode;
}
if ('href' in noddy & amp; & amp; noddy.href.indexOf('http') !== -1 & amp; & amp; (noddy.href.indexOf(document.location.host) !== -1 || remotes)) {
event. preventDefault();
document.location.href = noddy.href;
}
}, false);
alert('Please install the new version!');
location.href='../../dist/index.html';
}
//ios8 compatible
if( navigator.appVersion.match(/(iPad|iPhone|iPod)/g) & amp; & amp; navigator.appVersion.match(/OS 8/g)){
$(document).ready(function(){
// $('#ios8_statusbar').show();
// $('body').css('padding-top','20px');
// $('#main_panel').css('top','20px');
\t\t
});
}