android - "Add to homescreen"Android 中的按钮未将网站显示为 Web 应用程序

标签 android google-chrome mobile-website homescreen

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

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

我关注了this创建与 Android 兼容的网络应用的教程:

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

我做错了什么?

最佳答案

如您所见 here此功能仍标记为 Beta .我想您需要使用最新版本的 Chrome 来测试此功能。 来自文章:

支持添加到主屏应用

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

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

名称属性必须是“mobile-web-app-capable”,内容属性必须是“yes”(不区分大小写)。如果 content 属性中有任何其他值,则 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 添加到主屏幕

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

Android vs iOS

虽然 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">

希望对你有帮助。

关于android - "Add to homescreen"Android 中的按钮未将网站显示为 Web 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21018750/

相关文章:

mobile - 使用 Viewport 创建适合移动设备的版本

android - 程序化 ImageView 和 picasso

javascript - JavaScript中有没有类似ViewHolder的功能?

android - 网页左侧在 Android 手机上被截断,但在 Chrome、Safari 和 Firefox 上看起来不错

javascript - Chrome 中极其奇怪的故障 - 解析字符串的内容!

forms - 输入类型范围显示文本框而不是 slider

android - Phonegap 数据库加密 : where should I store the password?

javascript - Chrome、javascript 日期和 toLocaleString()

javascript - 如何为 Insomnia 或 Postman 等 'packed chrome apps' 启用 JavaScript?

css - 如何将元标记设置为适合屏幕作为我页面的最小宽度?