android - <meta name="theme-color" content="#db5945">

Sigue obteniendo 404 para apple-touch-icon.png

Question

Seguimos recibiendo 404 para los siguientes dos archivos:

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

He estado rastreando el archivo de mi sitio web móvil en busca del culpable de este 404, y no hay lugar en mi código que esté dirigiendo a apple-touch-icon.png .

Al realizar una Find in folder... en Sublime Text 2 no se obtienen resultados para apple-touch-icon :

Searching 100 files for "apple-touch-icon"
0 matches across 0 files

Estamos utilizando las etiquetas meta de Apple para webapps:

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

¿El uso de estas etiquetas meta hará que un iPhone busque un apple-touch-icon de forma predeterminada? No estamos proporcionando un ícono, pero ¿deberíamos estarlo? Realmente nos gustaría eliminar este 404.

La navegación por la Documentación de desarrolladores de Apple no proporcionó pistas que refuercen mi teoría.

La trama se complica aún más cuando descubrimos que esto está sucediendo en iOS y Android, independientemente del navegador. Firefox, Safari y Chrome intentan encontrar este apple-touch-icon .

Usé HTML5 Mobile Boilerplate como iniciador para mi aplicación web, que tiene un archivo llamado helper.js . helper.js tiene esta función dentro de ella que helper.js de nuestro código:

/**
* 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/, '''');
}
}
};

Después de eliminar esto, todavía tenemos 404. Estoy perplejo. Cualquier ayuda es muy apreciada.

Answer 1

¿El uso de estas etiquetas meta hará que un iPhone busque un ícono de Apple-Touch de forma predeterminada? No estamos proporcionando un ícono, pero ¿deberíamos estarlo? Realmente nos gustaría eliminar este 404.

Sí. Wenn usted agrega

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

para su sitio significa que el usuario puede crear un marcador en su pantalla de inicio que no se abre en Safari sino en una vista web que parece una aplicación "nativa". Debe proporcionar estas imágenes como tipo de icono de aplicación para la pantalla de inicio.

Esta podría ser la sugerencia que estaba buscando: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html