web-dev-qa-db-ja.com

Apple-touch-icon.pngの404を取得し続ける

次の2つのファイルの404を取得し続けます。

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

私はこの404の犯人のためにモバイルWebサイトのアーカイブを精査しており、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 webappsのメタタグを使用しています。

<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モバイルボイラープレートをhelper.jsというファイルがあるWebAppのスターターとして使用しました。 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が取得されます。私は困惑しています。どんな助けでも大歓迎です。

androidiosgoogle-chromesafariapple-touch-icon
27
robabby

これらのメタタグを使用すると、iPhoneはデフォルトでApple-touch-iconを検索しますか？アイコンは提供していませんが、アイコンにする必要がありますか？本当にこの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

14
mr.VVoo