Login/Register
Is there an equivalent apple-touch-startup-image for the IPAD?
Asked Answered
Solved iphoneipadsplash-screenipod-touchiphone-5
S

8

20

For web apps you can set the startup screen with apple-touch-startup-image

What about for iPads?

Sophisticated answered 14/4, 2010 at 2:30 Comment(0)
R
17

I had the same issue as well... You need to you use a specific size of 1004*768. i explained it in this blog: http://www.amirnaor.com/?p=71

Rich answered 6/5, 2010 at 21:24 Comment(0)
P
14

This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, and iPhone 5. These include the status bar area as well.

<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/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 -->
<link href="http://www.example.com/mobile/images/apple-touch-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">
<link href="http://www.example.com/mobile/images/apple-touch-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">

<!-- iPad (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-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">
<link href="http://www.example.com/mobile/images/apple-touch-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">

If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.

Pother answered 4/3, 2012 at 4:11 Comment(1)
The sizes attribute isn't understood, you need to use media instead. – Rosalbarosalee
R
3

Portrait image needs to be 768x1004 (note: 1004, not 1024, 20px is for status bar), PNG is the preferred file format.

Landscape image needs to be 1024x748 (note: 748, again 20px for status bar). This image then needs to be rotated 90 degrees clockwise, end result is 748x1024.

Link tags in header need to be as follows:

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

For the new Retina iPad (if you don't add these, it will use the above with pixel doubling):

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

Previous answers (including the accepted answer) at time of posting this didn't work with my testing.

Rosalbarosalee answered 5/6, 2012 at 4:50 Comment(2)
If you're going to downvote me, please explain why so I can fix it. – Rosalbarosalee
Does not device width have to refer to the actual css resolution? Meaning 1024x768 – Genuine
L
1

I think Madhup is referring to native apps written in objective c and compiled with xcode. The OP is trying to make it work for webapps that are added to the homescreen via safari. Haven't gotten it to work so far :(

Lelandleler answered 27/4, 2010 at 16:59 Comment(0)
T
1

I only got the startup image to work by making a PNG image with dimensions of 748x1024. This was tested on an iPad with firmware 3.2.1.

Touraco answered 24/8, 2010 at 19:53 Comment(0)
A
1

The best explanation of this issue I could find: https://gist.github.com/472519

Note that it only worked for me once I provided a startup image for iPhone and both landscape/portrait for iPad.

Await answered 12/9, 2011 at 21:21 Comment(0)
B
-1

From my testing today, it seems the iPad doesn't support the apple-touch-startup-image. It's quite disappointing that the iPhone does support this in OS 3.1, and the iPad doesn't. Also, when using a webapp in a chromeless browser, the viewport isn't set properly. I do believe both are bugs or omissions in the iPad OS 3.2. Too bad :( I did ask for it at the apple forums: https://devforums.apple.com/thread/47178

Biblicist answered 20/4, 2010 at 15:13 Comment(0)
F
-2

It's the same as the iphone. Put a png named Default.png in the resource folder.

Fayfayal answered 14/4, 2010 at 3:41 Comment(2)
iPad should support all interface orientations. So Default.png only would not work. – Cabasset
This isn't what the OP is asking about. OP is asking about the Mobile Safari special treatment of <link> tags: developer.apple.com/safari/library/documentation/… – Mackoff

© 2022 - 2024 — McMap. All rights reserved.