用ChatGPT解决这个技术问题 Extra ChatGPT

Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?

I've written an HTML5-based iOS web application and all seems to be working well, but I'm trying to polish it up with multiple startup screens. The iPhone/iPod touch works well w/a PNG of 320x460, as follows: 

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />

I found plenty of documentation that says the startup images for the iPad should, like the iPhone/iPod touch, have the 20px shaved from the height to accommodate for the status bar giving resolutions of 768x1004 (portrait) or 1024x748 (landscape). However, in my testing (currently w/an iPad running iOS 3.2.2), only the 768x1004 (portrait) resolution works (but is incorrect—20px too narrow—when in landscape mode).

I've tried the following (a wild guess based on the functionality of the apple-touch-icon links), to no avail: 

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" />

Only the 768x1004 resolution image works if it's the last link element listed. If the 1024x748 resolution image is last, a gray background is rendered in its stead (but never the 768x1004). So, obviously the apple-touch-startup-image link doesn't support the sizes attribute.

Is this supported in newer versions of the iOS? Is there any way to support multiple startup images? Should I create a 1024x768 startup image? If so, will is be scaled down for the iPhone/iPod touch? Or, should I just give up and not have a startup image for the iPad?

morgant - thanks for a great question! Just out of curiosity... do you know if it's possible to specify a high-res startup screen for the iphone 4 (i.e., 640x920)?
Did my answer satisfy your question? If so can you select it as the answer? Thanks
According to Apple (developer.apple.com/library/content/documentation/…) the first image you said it was 320 x 460 should be 320 x 480.
@alej27 Thanks for pointing that out, I believe that size changed in the last 5 years from when I initially asked the question (a number of the answers from that period include the same initial value.)

B
Bart

definitive solution for startup-image and touch-icons for iPad and iPhone (landscape || portrait) and (retina || not): 

        <!-- 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">
        <!-- iPhone 6/7/8 -->
        <link href="/images/favicon/750x1334.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
        <!-- iPhone 6 Plus/7 Plus/8 Plus -->
        <link href="/images/favicon/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
is packaging/ necessary in the third link tag?
For those reaching here and want the iPhone 5 startup image size: stackoverflow.com/a/12471432
Through testing, I found that the retina iPad is using the non-retina images using this config. Check my answer below, thanks to Pavel I created a fixed version.
for iphone5 image must be 640px by 1096px sorry :\
The device-width for "iPad (Retina, landscape) SPLASHSCREEN" should be 768 and not 1536.
F
Fabien Snauwaert

This answer gives a convenient way to generate all 20 splash screens currently required by iOS + up-to-date HTML markup for iOS 12.1.

This includes solutions for iPhone XR, iPhone XS Max and 11" iPad Pro

Context

Safari on iOS now supports Progressive Web Apps, but implements it differently from Chrome. It does read the manifest file, but it ignores the icons declared in it.

Instead, Safari expects a list of apple-touch-startup-image tags. While the official Apple docs list this example: 

<link rel="apple-touch-startup-image" href="/launch.png">

…it is misleading, because (at least as of iOS 12.1), one image is not enough and will not work. Instead, Safari expects one image per resolution.

If the splash screen is missing or incorrect, a white screen will show on load, which looks unprofessional and makes the (web)app feel slow.

Generating the splash screens

There are apple-touch-startup-image generators online but they're either broken or ignore Landscape altogether, and their naming conventions are not all that nice. This is easier.

Run the following command in bash in a directory containing a logo.png file and it will produce the 20 images expected by Safari (ten resolutions, for each of Portrait and Landscape): 

array=( 0640x1136 0750x1334 0828x1792 1125x2436 1242x2208 1242x2688 1536x2048 1668x2224 1668x2388 2048x2732 )
for i in "${array[@]}"
do
  split=(${i//x/ })
  portrait=$i
  landscape=${split[1]}x${split[0]}
  gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${portrait}  splash-portrait-${portrait}.png
  gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${landscape} splash-landscape-${landscape}.png
done

This relies on GraphicsMagick, a better alternative to ImageMagick. (On macOS, with brew, it's as easy to install as brew install graphicsmagick.

Markup

Here is the HTML markup for all 20 files: 

<!--
 # SPLASH SCREENS FOR iOS.
 #
 # If the splash screen is missing or incorrect, a white screen will show on load, which looks unprofessional
 # and makes the (web)app feel slow.
 #
 # Constraints:
 # - Cannot use a single image for all.
 # - The size of the image must fit that of the targeted device, else no splash screen will show.
 # - There seems to be some leeway (e.g.: pictures 40px and 60px shorter did work), but unclear how much.
 # Bottom-line: you need one splash screen per resolution and orientation.
 #
 #
 # List of devices and resolutions (AUG-2019):
 #
 #     Device              Portrait size      Landscape size     Screen size        Pixel ratio
 #     iPhone SE            640px × 1136px    1136px ×  640px     320px ×  568px    2
 #     iPhone 8             750px × 1334px    1334px ×  750px     375px ×  667px    2
 #     iPhone 7             750px × 1334px    1334px ×  750px     375px ×  667px    2
 #     iPhone 6s            750px × 1334px    1334px ×  750px     375px ×  667px    2
 #     iPhone XR            828px × 1792px    1792px ×  828px     414px ×  896px    2
 #     iPhone XS           1125px × 2436px    2436px × 1125px     375px ×  812px    3
 #     iPhone X            1125px × 2436px    2436px × 1125px     375px ×  812px    3
 #     iPhone 8 Plus       1242px × 2208px    2208px × 1242px     414px ×  736px    3
 #     iPhone 7 Plus       1242px × 2208px    2208px × 1242px     414px ×  736px    3
 #     iPhone 6s Plus      1242px × 2208px    2208px × 1242px     414px ×  736px    3
 #     iPhone XS Max       1242px × 2688px    2688px × 1242px     414px ×  896px    3
 #     9.7" iPad           1536px × 2048px    2048px × 1536px     768px × 1024px    2
 #     7.9" iPad mini 4    1536px × 2048px    2048px × 1536px     768px × 1024px    2
 #     10.5" iPad Pro      1668px × 2224px    2224px × 1668px     834px × 1112px    2
 #     11" iPad Pro        1668px × 2388px    2388px × 1668px     834px × 1194px    2
 #     12.9" iPad Pro      2048px × 2732px    2732px × 2048px    1024px × 1366px    2
 #
 # Sources:
 # - Device and resolutions (Portrait size, Landscape size) from https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/
 # - Screen width as measured by JavaScript's `screen.width` and `screen.height` in Simulator, except for:
 #   - 7.9" iPad mini 4 (not in Simulator): https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
 #   - 9.7" iPad (not in Simulator): had to assume they meant iPad Pro.
 #
 #
 # Tested on the following devices, in Simulator with iOS 12.1, in both Portrait and Landscape:
 #   iPhone 5s, iPhone 6, iPhone 6 Plus, iPhone 6s, iPhone 6s Plus, iPhone 7, iPhone 7 Plus, iPhone 8,
 #   iPhone 8 Plus, iPhone SE, iPhone X, iPhone XS, iPhone XS Max, iPhone XR, iPad Air, iPad Air 2,
 #   iPad (5th generation), iPad Pro (9.7-inch), iPad Pro (12.9-inch), iPad Pro (12.9-inch) (2nd generation),
 #   iPad Pro (10.5-inch), iPad (6th generation), iPad Pro (11-inch), iPad Pro (12.9-inch) (3rd generation).
 # Everything worked fine (splash screen showing in every single case.)
 #
 # FYI:
 # - tvOS does not come with a browser. So the largest screen to care for is an iPad.)
 # - On all iPads (in Simulator), had to either Add to Home twice or restart the device to see the icon.
 #   WOULDDO Test on a real iPad.
 -->
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0640x1136.png" media="(device-width:  320px) and (device-height:  568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0750x1334.png" media="(device-width:  375px) and (device-height:  667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0828x1792.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1125x2436.png" media="(device-width:  375px) and (device-height:  812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2208.png" media="(device-width:  414px) and (device-height:  736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2688.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1536x2048.png" media="(device-width:  768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2224.png" media="(device-width:  834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2388.png" media="(device-width:  834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">

<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1136x0640.png" media="(device-width:  320px) and (device-height:  568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1334x0750.png" media="(device-width:  375px) and (device-height:  667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1792x0828.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2436x1125.png" media="(device-width:  375px) and (device-height:  812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2208x1242.png" media="(device-width:  414px) and (device-height:  736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2688x1242.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2048x1536.png" media="(device-width:  768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2224x1668.png" media="(device-width:  834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2388x1668.png" media="(device-width:  834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2732x2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

(Personally, I keep the comments in a Twig comment block so I get to keep the info without polluting the client's with too much text.)

Some examples I saw online used min-device-*, but this makes little sense in this context given Safari expects pictures in (near-)exact dimensions.

Some other examples I saw used shorter images (40 or 60px shorter, i.e. without the status bar). Older versions of iOS seem to have expected such dimensions, but this is no longer the case.

Parting thoughts

96% of my iOS users use iOS 12.x, so thankfully no need to care too much about older iOS versions. But if I missed something please let me know.

Where Android, like a big boy, is happy showing the app's icon as part of the splash screen, iOS and Safari force us through all this extra work. 20 images to show a simple splash screen! This is crazy! Things might get better in the future, but that's how it is for now.

This elementary task took a lot of coding and testing. I hope it'll help someone.

I'll try to keep this updated with newer resolutions. Please post a comment if you see one is missing.

Thank you for the insights! This is the most complete list of splash screen declarations I’ve seen so far. While the media queries work perfectly on iOS, I came across an issue on the new iPadOS. It seems that the (orientation: landscape) part is not working here, as it always displays the portrait version for a device. The image then appears distorted in landscape mode to fit to the width. Is this a bug?
Hey @debite did you manage to find a solution to the orientation not working? It seems I've encountered the same issue!
@nickw444 Did any one of you ever resolve this? I'm currently struggling with a PWA's startup image being stretched in landscape mode. It's simply taking the portrait image and scaling it to fit the screen, which of course looks very ugly!
This code is slightly outdated. It lacks iPhone 12 sizes.
iPhone 12 Mini, 12 (and Pro), and 12 Pro Max are 1080x2340, 1170x2532, 1284x2778 and have pixel ratio of 3
C
Chris

I just wanted to offer a combination of answers that actually worked. We found with the answer that was selected, the retina versions of the splash images were not being used. Pavel's answer fixed the retina version for the iPad. The following has been tested on iPhone (Retina and non-retina) and iPad (retina and non-retina). 

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-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">

<!-- 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 (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (non-Retina) (Portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" />
<!-- iPad (non-Retina) (Landscape) -->
<link href="apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

I can't take credit for any of this, but this configuration works. Just copy and paste, make sure to make the images exactly the size dictated in their names.

thanks, this worked, but only when the images were in the root directory.
Yeah good call, I'm not sure if it's good or bad to have them in the root. I just followed my old thoughts of the favicon, figure if favicon is sitting in the root the other newer "favicons" can do that too.
@JacobMouka Not necessarily in the root. The path is relative to the dir where the html file sits.
@Andrej I miss-typed. I don't mean root folder, but same dir as the html page. When the link's href contained any paths, the startup images didn't load (but the icons did... go figure).
Works On My Machine™ with a path applied, e.g. href="img/apple-touch-startup-image-320x460.png" as long as it's relative to the path the page is served at. Use developer tools in a normal desktop browser and check that the image addresses are correct ...
d
derickito

I actually got it to work on landscape mode. I got the info here: https://gist.github.com/MrUzu/1044867/407e8351fc4c2326e9e656e96b8fc3df1840df07.

The issue is the landscape image has to be 748x1024 (A landscape image sideways, I rotated clockwise) instead of 1024x748.

I also had to launch the app in portrait mode first and then landscape.

Very informative link, thank you so much! - This made it work for me.
I would emphasize that you have to launch the iPad in portrait mode first! At least in 4.3.3 you do.
Link is broken.
Found another link with the same info: gist.github.com/MrUzu/1044867/…
C
Cagey

If one link elements was missing a media property things didn't work for me. The code successfully displayed a launch image on an iPhone 3G and iPad (portrait and landscape mode) . 

<-- iPad - landscape (748x1024) -->
<link rel="apple-touch-startup-image" href="images/ipad-landscape.png"  media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<-- iPad - portrait (768x1004) -->  
<link rel="apple-touch-startup-image" href="images/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<-- iPhone - (320x460) -->
<link rel="apple-touch-startup-image" href="images/iphone-lowres.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" />

Couldn't give it a try for the iPhone4 (high res) but most probably it works the same way.

Aha, I hadn't thought of trying "media" attributes! I'll give that a shot and see how it goes.
Notice that the landscape dimensions are flipped! The landscape image has a width of 748, not 1024, and a height of 1024. This means that your landscape splash image should be rotated 90 degrees clockwise.
H
Hamilton Meyer

Apparently the startup screen only works under the following conditions

1) must be the exact size required by the device. 2) the device must be in portrait orientation when the app is launched. 3) some sources say png only but jpg seems to work now.

It's correct that the startup image only works in portrait, and unfortunately this is still the case with iOS 5. I really hoped they would fix this with iOS 5, but no luck. :-(
No wait, I did some more testing and this bug has actually been fixed in iOS 5! Now, the startup image is shown from the first or second launch from the home screen no matter what orientation you're holding the iPad in. Just remember the media queries on the LINK tags! If you're not including them, you'll experience odd behaviour.
To support the Landscape orientation, you need to create links and images for them too. i.e.: for each possible device resolution you have two links and two images…
M
MPaulo

The most complete, gist solution: https://gist.github.com/tfausak/2222823

p
powtac

Spent some time figuring out how to make splash screen for the new iPad (Retina), here is my tested and working solution for both orientation of the new iPad (Retina).

P.S. before posting this I've tested already given solutions and they didn't worked. 

<!-- iPad (Retina) (Portrait) -->
<link href="/img/ios/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- iPad (Retina) (Landscape) -->
<link href="/img/ios/apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
m
muzzamo

This may be obvious to some but the startup image would not work for me unless I added I added a shortcut to the home screen, ran it from there, and had the following code: 

<meta name="apple-mobile-web-app-capable" content="yes" />

This page was useful for figuring this all out: http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images

R
Rob

The way I was able to get 4 individual Startup Images for WebApps on the iPhone/iPad/iPhoneRetina was a combination of a few things...

Non-Retina iPhone (320x460): 

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

Retina iPhone (4 & 4S) (640x920): Use the Javascript technique posted above. http://www.paulofierro.com/archives/568/

iPad (both orientations) is tricky. Landscape must be 748w x 1024h, with the "bottom" being the left hand side. Portrait must be 768w x 1004h, with the "bottom" being the bottom. I had to include the iPad tags via PHP by detecting iPad in the User Agent, otherwise the non-retina iPhone Startup Image wouldn't load. Here is the code... 

            <?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); ?>
            <?php if ($isiPad) { ?>
            <link rel="apple-touch-startup-image" href="startup-landscape.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
            <link rel="apple-touch-startup-image" href="startup-portrait.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
            <?php } ?>

Doing the above allows my webapp (actually a simple wordpress blog site, currently working on it offline) to have a startup image for iPhone, Retina and both iPad orientations. Tested on iPhone 3G running latest iOS 4, iPad and iPhone 4 both running latest iOS 5.

Of course you could also include the iPad code via javascript. lol

Hi there, thanks for pointing out that the portrait dimensions are actually 768x1004. I was using 748x1024 for the image and didn't work. It works now.
n
norman

i have tested many times, now i am sure it works when you act like this: first hold your pad in portrait way, open you app, then hold you app in landscape way, open you app. sucks but...seems this is the only way to make it. you have to first hold your pad portrait to "unlock" the bug.

G
Giovanni Brescia

Complete meta: 

<!-- Icons -->

<!-- iOS 7 iPad (retina) -->
<link href="icon-152x152.png"
      sizes="152x152"
      rel="apple-touch-icon">

<!-- iOS 6 iPad (retina) -->
<link href="icon-144x144.png"
      sizes="144x144"
      rel="apple-touch-icon">

<!-- iOS 7 iPhone (retina) -->
<link href="icon-120x120.png"
      sizes="120x120"
      rel="apple-touch-icon">

<!-- iOS 6 iPhone (retina) -->
<link href="icon-114x114.png"
      sizes="114x114"
      rel="apple-touch-icon">

<!-- iOS 7 iPad -->
<link href="icon-76x76.png"
      sizes="76x76"
      rel="apple-touch-icon">

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

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

<!-- Startup images -->

<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (portrait) -->
<link href="startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (landscape) -->
<link href="startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone 5 -->
<link href="startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone (retina) -->
<link href="startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPhone -->
<link href="startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
S
SemanticZen

iPhone 6 and iPhone 6+ 

<link href="launch6.png" media="(device-width: 375px)" rel="apple-touch-startup-image">
<link href="launch6plus.png" media="(device-width: 414px)" rel="apple-touch-startup-image">

From this link: http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers

P
Paulo Fierro

If you want to target the retina display I found a solution and blogged about it here: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome

Basically the sizes property and media queries will not work. You have to inject the high-res startup image via JavaScript once your page is loaded. Hacky but works.

关注公众号,不定期副业成功案例分享
Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now

HuntsBot,a one-stop outsourcing task, remote job, product ideas sharing and subscription platform, which supports DingTalk, Lark, WeCom, Email and Telegram robot subscription. The platform will push outsourcing task requirements, remote work opportunities, product ideas to every subscribed user with timely, stable and reliable.

简体中文 English

Platform

Support

Contact US

Any questions or suggestions during use, you can contact us in the following ways:

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.