Question

当我尝试将我的一些网络应用程序添加到我的iPhone 5的主屏幕上时（在Android上可以），手机上说应用程序无标题，即使它已经无效。如果我取消并再试一次就行了。这似乎是第一次和第七次发生（可能会发生更多）。任何想法为什么和/或如何阻止这种情况发生？

我已经在另外的iPhone 5和iPhone 4上试过了，它也在它上面做了。

在我的HTML索引文件中，我正在使用标题标签，因为听过手机会将其用作网络应用的默认标题，这对我来说很好。

<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">

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

任何想法为什么原始代码导致我的iPhone说我的网络应用程序是无标题的，请注释：）

我的iPhone说我的网络应用程序是无标题的吗？

1 个答案: