0

ホーム画面に追加されたら、次のスクリプトを使用してモバイルWebサイトの起動画面を追加します。

<script>
(function(){

    var a;
    if(navigator.platform === "iPad") {
        a = window.orientation!==90||window.orientation === -90 ? 
             "/assets/img/startup/startup-tablet-landscape.png" :
             "/assets/img/startup/startup-tablet-portrait.png";
    }
    else {
        a = window.devicePixelRatio === 2 ? 
             "/assets/img/startup/startup-retina.png" :
             "/assets/img/startup/startup.png";
    }
    document.write('<link rel="apple-touch-startup-image" href="' + a + '"/>');

})();
</script>

これはiPhoneでは機能しますがiPadでは機能しません。新しいiPadでテストしていますが、これは重要ですか？読み込まれる前に表示されるのは白い画面だけです。

4

1 に答える 1

3

そのためにJavaScriptは必要ありません。このスニペットを使用すると、適切な画像が自動的に選択されます。

<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">


<!-- 320x460 for iPhone 3GS -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="startup-iphone.png">

<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="startup-iphone4.png">

<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="startup-iPad-portrait.png">

<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="startup-iPad-landscape.png">

ソース：https ：//gist.github.com/1375646

于 2012-04-25T19:52:33.373 に答える