我们不断获得以下两个文件的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
我们正在为网络应用程序使用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。
浏览苹果公司的开发者文档并没有提供任何线索来强化我的理论。
当我们发现无论浏览器如何,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(/bwidths*=s*320b/, 'width=320.1')
.replace(/bwidths*=s*device-widthb/, '');
}
}
};
去掉这个之后,我们仍然得到404。我被难住了。非常感谢您的帮助。
使用这些元标签会导致iPhone搜索苹果触摸图标默认?我们不提供图标,但应该我们是?我们真的只是想删除这个404。
是的。如果你添加
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
这意味着用户可以在主屏幕上创建书签,该书签不是在Safari中打开的,而是在看起来像"本地"应用程序的网络视图中打开的。您应该将这些图像作为主屏幕的应用程序图标提供。
这可能是您正在寻找的提示:http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html