iOS apple-touch-icon 仅适用于一个 URL
Posted
技术标签:
【中文标题】iOS apple-touch-icon 仅适用于一个 URL【英文标题】：iOS apple-touch-icon works only on one URL 【发布时间】：2019-08-12 07:25:58 【问题描述】：我有一个单页渐进式 Web 应用程序（从 iPhone 访问），我已将以下内容添加到我的 <head>：
<link rel="apple-touch-icon" href="img/appicon/acme_homescreen_60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/appicon/acme_homescreen_120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/appicon/acme_homescreen_152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="img/appicon/acme_homescreen_167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/appicon/acme_homescreen_180x180.png">
这适用于https://acme.com/login，因此不存在文件名拼写错误、路径错误、密码保护等基本问题……但它不适用于https://acme.com/selection 或除/login 之外的任何其他URL。我在那里得到默认屏幕截图。
我仔细检查了：所有 URL 上都有相同的 <head>，所以我错过了什么？
PS：我不能像建议的here那样使用https://realfavicongenerator.net/favicon_checker，因为服务器在本地运行。
【问题讨论】：
acme.com/login 和 acme.com/selection 是 404。这正常吗？无论如何，img/appicon/acme_homescreen_120x120.png 似乎是相对路径，您的错误可能来自这里吗？
Acme is fictional，但不，两个 URL 的相对路径相同。这似乎是一种错误，请参阅我的回答：虽然它适用于一个 URL，但它必须位于根目录中
【参考方案1】：
虽然我仍然不明白为什么它在 /login 上工作，但解决方案似乎是将（附加）apple-touch-icon.png 放在根目录中。为了将所有图标放在一个位置，我将所有引用的图标移到了根目录，但在那里有 apple-touch-icon.png 似乎就足够了。
为了公平起见，提到使用根目录in the documentation。
【讨论】：
以上是关于iOS apple-touch-icon 仅适用于一个 URL的主要内容，如果未能解决你的问题，请参考以下文章
centerXAnchor 仅适用于 iOS 9.0 或更高版本？
如何修复 - safeAreaLayoutGuide' 仅适用于 iOS 11.0 或更高版本