Android中的“添加到主屏幕”按钮不会将网站显示为Web应用程序吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (37)

我使用jQuery Mobile创建了一个适合移动设备的网站,并添加了一些元信息,以便将其固定到iOS和Android主屏幕,并应作为网络应用程序启动(换句话说:在浏览器中,但没有浏览器导航元件)。

它适用于iOS,但它不适用于Android 4.4.2。

尽管添加了本教程中列出的所有元信息,但Android并未为我的网站显示“添加到主屏幕”按钮,但它不会在本教程中描述的没有浏览器导航元素的情况下启动网站。

提问于
用户回答回答于

我想你需要用最新版本的Chrome来测试这个功能。从文章可以看出:

支持添加到主屏幕应用程序:

Chrome会在网页的元素中查找以下元标记:

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

name属性必须为“支持mobile-web-app”,content属性必须为“yes”(大小写不敏感)。如果内容属性中有任何其他值,则Web应用程序将作为常规书签添加。

图标:

用于安装到主屏幕的图标是通过使用以下<link>标记之一中找到的最大图标确定的:

<link rel="shortcut icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="shortcut icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

小心:建议使用192像素的图像格式。最后两种格式(apple-touch- *)已被弃用,并且只会在短时间内得到支持。

图标标签

应用程序的<title>元素用作主屏幕上图标的默认标签。

组态

以下示例是支持主屏幕启动体验所需的最低配置:

<!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="shortcut icon" sizes="192x192" href="/icon.png">
   </head>
   <body></body>
</html>

与iOS Safari添加到主屏幕比较:

如果Chrome浏览器使用“apple-mobile-web-app-capable”名称嵌入元标记,Chrome也将允许Web应用以“应用模式”启动。Chrome将在即将发布的版本中停止支持此用法。当Chrome浏览器检测到只有“apple-mobile-web-app-capable”元标记的页面时,Chrome浏览器当前会在Developer Tools的控制台日志中显示弃用警告。警告显示如下:

虽然Chrome暂时接受使用情况"apple-mobile-web-app-capable",但Chrome并未提供与iOS Safari API兼容的功能,包括:

window.navigator.standalone
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="/startup.png">

扫码关注云+社区