how to use a different <link> tag in the head tag depending on what IOS device is being used?

Question

I am working on making a web app for IOS devices, one of the link tags I am useing in the head tag is:

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

what this does is create a splash screen image that desplays for a second before the app opens. but with this image, it must be a specific size to work. which is different for Iphone/Ipod and Ipad.

my question is how can I use a different image (with the Ipad's image size requirement), that is only used when an Ipad user is useing the app?

Answer 1

Use JQuery and then check against the function.

After the check you can reference against this and update the <link> reference based on what the JQuery check returns.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

OR

Another method but not as efficient in my opinion is direct reference with CSS . You could use this to alter the image size according to the size of the screen.

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

Answer 2

You can use multiple <link> tags each with their own media attribute, which will determine whether or not they are loaded based on a media query. For example:

<!-- iPhone 3.5" Non-Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="images/startup-320x460.png">
<!-- iPhone 3.5" Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="images/startup-640x920.png">
<!-- iPhone 4" Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/startup-640x1096.png">

<!-- iPad Non-Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="images/startup-768x1004.png">
<!-- iPad Non-Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="images/startup-748x1024.png">
<!-- iPad Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="images/startup-1536x2008.png">
<!-- iPad Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="images/startup-2048x1496.png">