iPad apple-touch-startup-image實現portrait和landscape

標籤：class   c   code   tar   http   a   

iPad apple-touch-startup-image實現portrait和landscape

為ipad製作web應用程式的啟動畫面時發現個問題，只能顯示豎屏圖，橫屏圖出不來，網上的朋友都說無法解決，做了無數次嘗試，終於成功，如下：

 

首先頁面頭部裡要加入

<link rel=”apple-touch-startup-image” media=”screen and (orientation: portrait)” href=”/apple_startup.png”>
<link rel=”apple-touch-startup-image” media=”screen and (orientation: landscape)” href=”/apple_startup1.png”>

 

重點在下面：

兩張圖片必須符合寬高標準才能正常顯示：

startup_portrait.png  768×1004

startup_landscape.png 748×1024

1、要注意橫屏用圖必須豎過來，也就是寬748高1024才能顯示，怕說不清楚做了個

2、今天又發現，在safari裡選“添加到主畫面”時要保證裝置是豎放，才能在完成後成功顯示啟動畫面。

以上在iPad 1代 4.3.1系統上實驗成功。

<!-- iPhone ICON -->

<link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">

<!-- iPad ICON-->

<link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">

<!-- iPhone (Retina) ICON-->

<link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">

<!-- iPad (Retina) ICON-->

<link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

<!-- iPhone SPLASHSCREEN-->

<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">

<!-- iPhone (Retina) SPLASHSCREEN-->

<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad (portrait) SPLASHSCREEN-->

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

<!-- iPad (landscape) SPLASHSCREEN-->

<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">

<!-- iPad (Retina, portrait) SPLASHSCREEN-->

<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad (Retina, landscape) SPLASHSCREEN-->

<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">