Question

我知道您可以将元标记添加到html页面，告诉ios和android它们可以安装在主屏幕上。对于Android / Chrome谷歌告诉我们这样做。

<!doctype html>
<html>
   <head>
     <title>Awesome app </title>
     <meta name="viewport" content="width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="icon" sizes="196x196" href="/icon.png">
   </head>
   <body></body>
</html>

对于IOS，您似乎只需要添加

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

但谷歌在同一页面上发出警告说如何为Android做这件事，它将很快停止支持。

我已经拥有一个桌面版本的单页网络应用程序，以支持在一个赛季中挑选美式足球比赛的比赛。我为我运行的社区网站创建了这个，我希望将其转换为在移动设备上运行（这是一个完全重写，可以将其分解为更小的单个屏幕）。然而，社区将拥有各种各样的设备 - 从手机到平板电脑 - 甚至还有桌面设备，如果可能的话，我想用一个页面支持所有设备。

我希望手机和平板电脑用户可以安装到主屏幕，或者如果他们没有，可以包含切换全屏按钮，桌面用户可以使用切换全屏按钮，但它可能并不重要通常有足够的屏幕空间。

我见过的所有指南都为每台设备提供了peacemeal的建议。我所看到的不是我所描述的如何将所有这些技术结合在一起用于单个应用程序。

是否有可能，如果可能的话。

Answer 1

这适用于iOS 5,6,7,8和Android 4.0 +

<!-- Enable the homescreen app on mobile devices -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- Enable the App Icon -->
<link rel="icon" type="image/png" sizes="196x196" href="images/AppIcon.png">
<link rel="apple-touch-icon" href="images/AppIcon.png">
<link rel="apple-touch-startup-image" href="http://ourURL/images/iPhoneStartup.png">

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, height=device-height, width=device-width" />

如何在ios和android的主屏幕上创建可安装的Web应用程序

1 个答案: