iOS Safari 添加到我的 Angular Web 应用程序图标的主屏幕作为屏幕截图而不是 apple-touch-icon

Posted

技术标签:

【中文标题】iOS Safari 添加到我的 Angular Web 应用程序图标的主屏幕作为屏幕截图而不是 apple-touch-icon【英文标题】：iOS safari add to home screen of my angular web app icon coming as screenshot instead of apple-touch-icon 【发布时间】：2020-10-05 08:07:49 【问题描述】：

当我尝试将我的 Angular Web 应用程序添加为我的 ios Safari 主屏幕的快捷方式时，它会作为我的应用程序页面的屏幕截图出现，尽管我在我的索引中添加了一个苹果触摸图标链接。 html。我的图像是 150*150 大小和一个 png。下面是我的 HTML 代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Insights</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="src/assets/icons/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
  <meta name="theme-color" content="#1976d2">
</head>

<body>
  <app-root></app-root>
  <noscript>Please enable javascript to continue using this application.</noscript>
</body>

</html>

【问题讨论】：

【参考方案1】：

经过一些研究发现，在下面的行中有 src 是我的坏事。

<link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">

将其更改为以下工作

<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon-150x150.png">

【讨论】：

以上是关于iOS Safari 添加到我的 Angular Web 应用程序图标的主屏幕作为屏幕截图而不是 apple-touch-icon的主要内容，如果未能解决你的问题，请参考以下文章

获得权限后的 Facebook 登录让 Safari 空白页面打开，而不是在 iOS 10 和 iOS 11 中重定向到我的应用

iOS：我可以将 Safari 中的 URL 共享到我自己的应用程序吗？

Angular SPA PWA - Safari iOS 选项卡图标不会改变

Angular GET 请求错误，但仅在 Safari iOS 上

为啥我的 Mobile Safari 缓存不会清除？

如何将 sass-lint 添加到我的 angular-cli.json 文件中？