iPad3 web app splash screen not working in landscape mode

Question

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?

Answer 1

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