CODEWITHSUNDEEP
ipadhtmlweb-applicationssplash-screen
Taher Saeed
Taher Saeed

Reputation: 685

iPad3 web app splash screen not working in landscape mode

I built a HTML5 webapp for iPad which used the splash screen for landscape and portrait mode. I used the below link tags to get it to work.

<link media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="{{MEDIA_URL}}ipad/img/Default-Landscape.png" rel="apple-touch-startup-image"/>
<link media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="{{MEDIA_URL}}ipad/img/Default-Portrait.png" rel="apple-touch-startup-image"/>

The images work well for iPad1 and 2 however, with iPad3 the splash screen in landscape mode appears out of place, the portrait mode works okay. Do I have to use a different image for landscape mode or have to change the link tag?

Upvotes: 7

Views: 5247

Answers (1)

amoeba
amoeba

Reputation: 571

Size for high-resolution iPad launch images (in pixels):
1536 x 2008 (portrait)
2048 x 1496 (landscape)
Source: apple

Add this to your media query:
and (-webkit-min-device-pixel-ratio: 2) to target the new iPad, e.g:

<link rel="apple-touch-startup-image" href="img/ipad-landscape-retina.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />

Upvotes: 11

Related Questions