我知道您可以将元标记添加到 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 做它很快就会停止支持。
我已经有一个单页网络应用程序的桌面版本，以支持在一个赛季中挑选美式足球结果的比赛。我为我运行的社区网站创建了这个，我想将它转换为在移动设备上运行(这是一个完整的重写，将它分解成更小的独立屏幕)。然而，社区将拥有各种各样的设备——从手机到平板电脑——实际上仍然是台式机，如果可能的话，我想用一个页面支持所有这些设备。
我希望手机和平板电脑用户可以安装到主屏幕，或者包括一个切换全屏按钮(如果他们没有)，桌面用户可以使用切换全屏按钮，但这可能并不像他们那么重要通常有足够的屏幕空间。
我见过的所有指南都为每种设备提供了建议。我所见过的任何人都没有描述我如何将所有这些技术结合在一起用于单个应用程序。
是否可能，如果可能的话如何。
最佳答案
这适用于 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" />
关于android - 如何为 ios 和 android 创建一个可安装在主屏幕上的网络应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25177541/