如何在webapp中创建webapp打开链接而不是safari

时间:2016-12-17 20:27:33

标签: javascript html web-applications mobile-safari

所以我正在构建另一个网站,我希望我的用户将网站添加到主屏幕并从那里使用它。但是当我尝试使用其他网站的代码时,它并不起作用。

1 个答案:

答案 0 :(得分:1)

<head>文件的index.html中加入这些元标记。在iOS上,这将模拟可添加到主屏幕的webapp。

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

<link rel="apple-touch-icon" href="/custom_icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

<link rel="apple-touch-startup-image" href="/launch.png">

为了让每个设备正确加载图标和启动图像,您的图片必须具有下面链接的Apple UI指南中描述的确切尺寸。如果未使用这些尺寸指定图像,则不会加载。

Launch Screen Dimensions

App Icon Dimensions

Configuring Web Applications

此Gist还会显示所有可用的元标记:https://gist.github.com/tfausak/2222823