我已经使用 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”元标记的页面时,它会在开发者工具的控制台日志中显示弃用警告。警告显示如下:
虽然 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/