Home/ Questions/Q 7694363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T21:18:10+00:00

I built a HTML5 webapp for iPad which used the splash screen for landscape

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)" />
    • 0