Android中的"添加到主屏幕"按钮不会将网站显示为Web App
Adr*_*ore 20 android google-chrome homescreen mobile-website
我用jQuery Mobile创建了一个适合移动设备的网站,并添加了一些元信息,以便它应该固定在iOS和Android主屏幕上,并且应该作为Web应用程序启动(换句话说:在浏览器中,但没有浏览器导航元件).
它适用于iOS,但它不适用于Android 4.4.2.
我按照本教程创建了Android兼容的网络应用程序:
尽管添加了教程中列出的所有元信息,但Android确实显示了我的网站的"添加到主屏幕"按钮,但它没有启动没有浏览器导航元素的网站,如教程中所述.
我究竟做错了什么？
Ass*_*iel 38
正如您在此处所见,此功能仍标记为Beta.我猜您需要使用最新版本的Chrome测试此功能.来自文章:
支持添加到主屏幕应用程序
Chrome会在网页元素中查找以下元标记:
<meta name="mobile-web-app-capable" content="yes">
name属性必须是"mobile-web-app-capable",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">
注意:建议使用192px图像格式.最后两种格式(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的比较添加到主屏幕
如果他们使用"apple-mobile-web-app-capable"名称嵌入元标记,Chrome还将允许Web应用以"应用模式"启动.Chrome将在即将发布的版本中停止支持此用法.Chrome当前检测到只包含"具有Apple-mobile-web-app-capable"元标记的网页时,Chrome会在开发人员工具的控制台日志中显示弃用警告.警告显示如下:
虽然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文档,这个解决方案现在已经过时了.请参阅:https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/ (3认同)
- 感谢您的跟进!只是为了确保:您是否意味着网站从Nexus 5中的主屏幕加载而不显示浏览器导航元素？ (2认同)
| 归档时间： |
|
| 查看次数： |
36504 次 |
| 最近记录： |