iPadのモバイルウェブサイトの起動画面

Question

次のスクリプトを使用して、自分のモバイルウェブサイトの起動画面をホーム画面に追加すると、その画面に追加できます。

<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でテストしますか？私が得るのは、ロードする前に白い画面です。

Answer 1

あなたはそのためにはJavaScriptを必要としない、あなたはこのsnippletを使用することができ、それが自動的に右の画像を選択する必要があります。

<!-- 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