Question

根据chrome-developers site中提供的文档添加了所有元信息。

但是添加到主屏幕无法在Chrome移动浏览器上运行 - 给出的ICON 未保存在手机上。该应用程序的图标正在截取该页面的随机屏幕截图。

我正在处理的网站 - here

这里是代码 - ＆gt;

// for chrome
<meta content="yes" name="mobile-web-app-capable" />
<link href="/images/inkl-196.png" rel="shortcut icon" sizes="196x196" />
<link href="/images/inkl-128.png" rel="shortcut icon" sizes="128x128" />
// for safari
<link href="/images/touch-icon-iphone-default.png" rel="apple-touch-icon" />
<link href="/images/touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76" />
<link href="/images/touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120" />
<link href="/images/touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152" />

请评论我可能出错的地方。

不确定原因，在线尝试了其他解决方案 - dint help。

Answer 1

首先，我们的文档存在问题，我们建议使用196px，实际上它应该是192px - 这可能解释了这个问题。

其次，现在（2015年12月）推荐的解决方案是使用web app manifest。 Web App清单描述了浏览器应该启动什么以及它应该如何从主屏幕启动它。您需要创建一个清单文件（见下文），然后在您的html页面的<link rel="manifest" href="{url to your manifest}">中使用head从您的网页链接到该文件。

示例（全屏启动索引页）：

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

在Chrome上添加到主屏幕 - 图标未在手机上下载

1 个答案: