【问题标题】:Keep getting 404's for apple-touch-icon.png继续为 apple-touch-icon.png 获取 404
【发布时间】:2013-02-05 20:32:03
【问题描述】:

我们不断收到以下两个文件的 404:

/apple-touch-icon-precomposed.png: 685 Time(s)
/apple-touch-icon.png: 523 Time(s)

我一直在搜索我的移动网站档案,寻找这个 404 的罪魁祸首,我的代码中没有指向apple-touch-icon.png 的地方。

在 Sublime Text 2 中执行 Find in folder... 会为 apple-touch-icon 提供零结果:

Searching 100 files for "apple-touch-icon"

0 matches across 0 files

我们正在为 web 应用使用 Apple 元标记:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

使用这些元标记会导致 iPhone 默认搜索 apple-touch-icon 吗?我们没有提供图标,但我们应该提供吗?我们真的很想删除这个 404。

浏览 Apple 的 Developer Documentation 没有提供任何提示来强化我的理论。

当我们发现这发生在 iOS 和 Android 上时,情节更加复杂,无论浏览器如何。 Firefox、Safari 和 Chrome 都在尝试找到这个 apple-touch-icon

我使用 HTML5 Mobile Boilerplate 作为我的 WebApp 的启动器,它有一个名为 helper.js 的文件。 helper.js 里面有这个函数,我从我们的代码中删除了:

/**
     * iOS Startup Image helper
     */

    MBP.startupImage = function() {
        var portrait;
        var landscape;
        var pixelRatio;
        var head;
        var link1;
        var link2;

        pixelRatio = window.devicePixelRatio;
        head = document.getElementsByTagName('head')[0];

        if (navigator.platform === 'iPad') {
            portrait = pixelRatio === 2 ? 'img/startup/startup-tablet-portrait-retina.png' : 'img/startup/startup-tablet-portrait.png';
            landscape = pixelRatio === 2 ? 'img/startup/startup-tablet-landscape-retina.png' : 'img/startup/startup-tablet-landscape.png';

            link1 = document.createElement('link');
            link1.setAttribute('rel', 'apple-touch-startup-image');
            link1.setAttribute('media', 'screen and (orientation: portrait)');
            link1.setAttribute('href', portrait);
            head.appendChild(link1);

            link2 = document.createElement('link');
            link2.setAttribute('rel', 'apple-touch-startup-image');
            link2.setAttribute('media', 'screen and (orientation: landscape)');
            link2.setAttribute('href', landscape);
            head.appendChild(link2);
        } else {
            portrait = pixelRatio === 2 ? "img/startup/startup-retina.png" : "img/startup/startup.png";
            portrait = screen.height === 568 ? "img/startup/startup-retina-4in.png" : portrait;
            link1 = document.createElement('link');
            link1.setAttribute('rel', 'apple-touch-startup-image');
            link1.setAttribute('href', portrait);
            head.appendChild(link1);
        }

        //hack to fix letterboxed full screen web apps on 4" iPhone / iPod
        if ((navigator.platform === 'iPhone' || 'iPod') && (screen.height === 568)) {
            if (MBP.viewportmeta) {
                MBP.viewportmeta.content = MBP.viewportmeta.content
                    .replace(/\bwidth\s*=\s*320\b/, 'width=320.1')
                    .replace(/\bwidth\s*=\s*device-width\b/, '');
            }
        }
    };

删除它后,我们仍然会得到 404。我难住了。非常感谢任何帮助。

【问题讨论】:

标签: android ios google-chrome safari apple-touch-icon


【解决方案1】:

使用这些元标记会导致 iPhone 搜索 苹果触摸图标默认?我们不提供图标,但应该 我们是?我们真的很想删除这个 404。

是的。温你加

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

对于您的网站,这意味着用户可以在他的主屏幕上创建一个书签,该书签不是在 Safari 中打开的,而是在一个看起来像“本机”应用程序的 web 视图中打开的。您应该提供这些图像作为主屏幕的应用图标。

这可能是您正在寻找的提示:http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

【讨论】:

  • 太好了,感谢您的回复和链接。这对我来说绝对有意义。不过,我仍然有点困惑,为什么这些标签也会导致 Android 上的 Firefox 和 Chrome 移动浏览器出现 404 错误。我将删除元标记并暂时关注错误日志。谢谢!
  • 此功能称为网络剪辑,其他浏览器也可能支持。例如,Chrome 允许您在“新标签”屏幕中放置一些书签。这些书签也有大图标,但当然你是对的,这有点令人困惑。
  • 我猜他们认为是的。尝试使用content="no" 添加第一个元标记。如果仍然出现,您应该提出一个新问题。
猜你喜欢
  • 2013-06-11
  • 2013-06-27
  • 1970-01-01
  • 1970-01-01
  • 2011-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多