css - 我的 iPhone 说我的 Web 应用程序是无标题的？

Question

当我尝试将我的一些网络应用程序添加到我的 iPhone 5(在 Android 上正常)的主屏幕时，手机显示该应用程序未命名，尽管它是。如果我取消并重试它有效。它似乎是第一次和大约第七次发生(可能发生更多)。关于为什么和/或如何阻止这种情况发生的任何想法？

我已经在另一部 iPhone 5 和 iPhone 4 上试过了，在它们上也是如此。

在我的 HTML 索引文件中，我使用了 title 标签，因为听说手机会使用它作为网络应用程序的默认标题，这对我来说很好。

<title>My Web App</title>

我也尝试过使用这行代码，但没有帮助。

<meta name="apple-mobile-web-app-title" content=“This Is My Web App”>

即使有办法在第一次就阻止它发生，那也很好。

谢谢:)

Answer 1

更改主屏幕图标代码解决了问题。

是这样的:

    <!-- Apple homescreen icons -->
    <link rel="apple-touch-icon" href="images/HIN-Homescreen-Logo.png"> <!-- 180×180px apple-touch-icon.png -->
    <link rel="apple-touch-icon" sizes="57x57" href="images/HIN-Homescreen-Logo(57).png">
    <link rel="apple-touch-icon" sizes="76x76" href="images/HIN-Homescreen-Logo(76).png">
    <link rel="apple-touch-icon" sizes="120x120" href="images/HIN-Homescreen-Logo(120).png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/HIN-Homescreen-Logo(144).png">
    <link rel="apple-touch-icon" sizes="152x152" href="images/HIN-Homescreen-Logo(152).png">
    <link rel="apple-touch-icon" sizes="167x167" href="images/HIN-Homescreen-Logo(167).png">
    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Apple hide Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- Apple changing the status bar appearance -->

    <!-- Android homescreen icons -->
    <link rel="icon" sizes="192x192" href="images/HIN-Homescreen-Logo(192).png"> <!-- highres-icon.png -->
    <link rel="icon" sizes="128x128" href="images/HIN-Homescreen-Logo(128).png">
    <link rel="icon" sizes="96x96" href="images/HIN-Homescreen-Logo(96).png">
    <link rel="icon" sizes="72x72" href="images/HIN-Homescreen-Logo(72).png">
    <link rel="icon" sizes="48x48" href="images/HIN-Homescreen-Logo(48).png">
    <link rel="icon" sizes="36x36" href="images/HIN-Homescreen-Logo(36).png">
    <meta name="mobile-web-app-capable" content="yes"> <!-- Android install to the homescreen -->

现在是这样的:

    <!-- Apple and Andriod home screen icons -->
    <link href="images/HIN-Homescreen-Logo(120).png" rel="apple-touch-icon" /> <!-- 120×120px apple-touch-icon.png -->
    <link href="images/HIN-Homescreen-Logo(152).png" rel="apple-touch-icon" sizes="152x152" />
    <link href="images/HIN-Homescreen-Logo(167).png" rel="apple-touch-icon" sizes="167x167" />
    <link href="images/HIN-Homescreen-Logo.png" rel="apple-touch-icon" sizes="180x180" />
    <link href="images/HIN-Homescreen-Logo(192).png" rel="icon" sizes="192x192" />
    <link href="images/HIN-Homescreen-Logo(128).png" rel="icon" sizes="128x128" />

    <!-- Apple hide Safari -->
    <meta name="apple-mobile-web-app-capable" content="yes">

    <!-- Apple changing the status bar appearance -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Android add to the home screen -->
    <meta name="mobile-web-app-capable" content="yes">

此网页引导我找到答案:http://www.kylejlarson.com/blog/adding-an-icon-for-iphone-ipad-android-to-your-website/

问题似乎出在 Apple 图标上。我删除了一些并更改了顺序。我没有更改任何文件名或文件所在的位置。

apple-mobile-web-app-title 这行代码现在也每次都能正常工作。

<meta name="apple-mobile-web-app-title" content="This Is My Web App">

图像的顺序和大小导致网络应用程序标题出现问题，这似乎很奇怪。

关于原始代码导致我的 iPhone 说我的网络应用程序未命名的任何想法，请评论:)