【发布时间】: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。我难住了。非常感谢任何帮助。
【问题讨论】:
-
iOS 上的 Chrome 也会获取它,因为我们使用 Safari 用来制作浏览器的 iOS webview
标签: android ios google-chrome safari apple-touch-icon