iPhone網頁閃屏不能正常工作

在iPhone的Web應用程序，你理應可以定義，而該網站加載（在主頁上從保存的書籤圖標加載該網站時），將出現自定義啓動畫面。重點是讓網絡應用程序初創體驗更像一個真正的iPhone應用程序。iPhone網頁閃屏不能正常工作

我相信語法是這樣的：

<link rel="apple-touch-startup-image" href="/splash.png" />（放置在頁面的<head>部分）。

凡splash.png是一個垂直取向的320x460的圖像。

我似乎無法得到它的工作......沒有任何人有這方面的任何提示和技巧？

來源

2009-10-29 Scrappydog

蘋果沒有在文檔的方式很多關於這個主題（見this URL）。

幾件事情需要注意：

的代碼片段您提供假設你的形象是生活在http://yourdomain.com/splash.png
這隻適用於iPhone OS 3.0及更高版本
圖像必須是PNG
圖像只顯示到頁面的DOM準備

您還可以使用日e下面的代碼顯式設置web應用程序圖標：

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

來源

2009-10-30 01:32:43 richleland

確保它是320x460像素。

你已經說過了，但那是我的解決方案。

來源

2010-09-05 00:41:54

確保所有這些鏈接都位於標題中的其他樣式表之後。

來源

2010-11-08 09:04:03 james

的iOS 4不顯示啓動畫面，如果你有在頂部有一個通知欄 - 例如當使用個人熱點（共享）時。

來源

2011-07-07 11:34:31

您只能設置一個啓動畫面，否則會失敗。爲了選擇一個iPad或iPhone的閃屏，你需要一個小小的JavaScript。

，可用於本地應用程序的Web應用程序無法正常工作在iPad景觀閃屏。 iPhone4的視網膜閃屏也不會。你只能選擇一個iPad或iPhone大小飛濺。在link元素上設置size屬性似乎可以在ipad上工作。但擁有多個splash image鏈接元素會導致iphone失敗。

啓動畫面大小必須精確。 iPhone/iPod的320x460和iPad的1024x748。如果你需要一個風景斜線屏幕，你需要在photoshop中旋轉它，因爲在應用重新啓動期間沒有任何控制。

要測試它最好先嚐試關閉應用程序緩存，並用charles proxy或類似的東西來限制帶寬。

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

<!-- hide safari chrome --> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 

<!-- iphone start up screens --> 
<script type="application/javascript"> 
    var appl = document.createElement("link"); 
    appl.setAttribute('rel', 'apple-touch-startup-image'); 
    if(screen.width < 321 && window.devicePixelRatio == 1) { 
     appl.setAttribute('href', 'img/icons/launch320x460.png'); //iphone 3Gs or below 
    } else if (screen.width < 321 && window.devicePixelRatio == 2) { 
     //setting @2x or a 640x920 image fails, just use the iphone splash screen 
    } else if (screen.width < 769 && Math.abs(window.orientation) != 90) { 
     appl.setAttribute('href', 'img/icons/launch1024x748.png'); //ipad 2 or below (portait) 
    } else if (screen.width < 769 && Math.abs(window.orientation) == 90) { 
     //landscape fails as well, use standard ipad screen 
    } 
    document.getElementsByTagName("head")[0].appendChild(appl); 
</script> 

<!-- iphone springboard icons --> 
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/icons/icon57x57.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icon114x114.png"> 
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/icon72x72.png" />

來源

2011-10-07 04:17:33 puppybits

我得到了這個腳本的工作，但似乎有一個iPad的啓動畫面的錯誤。如果我第一次在橫向上啓動Web應用程序，則不會顯示任何啓動畫面。如果我第一次以肖像的方式發射，那麼這個閃屏就可以工作，但風景從未起作用。看來我不是唯一一個有這個問題的人，請在蘋果論壇上查看此主題：https://discussions.apple.com/thread/3316892?start=0&tstart=0 任何人都可以確認他們有在iPad的HTML5網絡應用上成功創建並顯示了橫向和縱向閃屏？ – SondreB

每當我遇到這個問題幾乎總是通過調用在同一頁的一個以上的啓動畫面或不是320x460像素（恰好）濺射屏幕造成的。這應該做的伎倆：

<link rel="apple-touch-startup-image" href="/splash-iphone.jpg" />

但在調用啓動畫面之前，您應該包含這些代碼三行，以及：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

來源

2012-01-07 10:46:11 kaleazy

已經完成了這些東西，在iOS 10上沒有運氣 – Developia

你是對的，這個代碼必須在部分和圖像必須是320x460像素，它不工作的原因是圖片必須是20KB或25KB或更小的小文件。我有同樣的問題，但是當我減少開始工作的文件。

歡呼聲

來源

2012-01-09 09:16:02 xmux

iPhone網頁閃屏不能正常工作

回答

相關問題