I'm doing a Sencha Touch web app with splash screens specified as follows. The images are 640x920 and 320x460 respectively (allowing for the statusbar and following an example from Sencha).
<link rel="apple-touch-startup-image" media="screen and (resolution: 326dpi)" href="/resources/img/startup_640.png" />
<link rel="apple-touch-startup-image" media="screen and (resolution: 163dpi)" href="/resources/img/startup.png" />
However, on an iPhone 4, I'm still seeing only the low resolution image. (To make things easy, I've embedded the text "640x920" and "320x460" in the appropriate image to be sure I'm looking at the right images.)
I keep clearing the Safari cache and reloading the app, but the wrong image continues to load.
Just to make sure I had them right, I switched the links to point to the opposite files, but then as expected, neither splash loaded.
Any other suggestions?
EDIT:
Similarly, the apple-touch-icon-precomposed is loading the smaller of the two as well.
This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, these include the status bar area as well.
<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" 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-startup-iPhone-RETINA.jpg" 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-startup-iPhone-Tall-RETINA.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad Portrait -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Landscape -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Portrait (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad Landscape (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" 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.
The lack of documentation certainly is frustrating. I found a solution and blogged about it here: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome
Basically the sizes property and media queries will not work. You have to inject the high-res startup image via JavaScript once your page is loaded. Hacky but works.
It seems at this point in time, Apple does not support a retina display resolution startup image. According to their docs...
On iPhone and iPod touch, the image must be 320 x 460 pixels and in
portrait orientation.
Nothing is stated in that article about supporting high-res startup images.
Another good discussion of this issue can be found here.
Related
I'm doing a webpage that uses the startup image feature for iOS devices. For this task, I'm using a code placed on the footer that detects with javascript which iOS device is, and then loads the startup image for it. In this way, the site saves a lot of bandwith because it's downloading only one image instead of four.
But with the new screen size of the iPhone 5, my code needs some changes, but I can't figure out how to do these.
This is the code:
<script>
(function(){
var p,l,r=window.devicePixelRatio;
if(navigator.platform==="iPad"){
p=r===2?"http://example.com/ipad-portrait-retina.jpg":"http://example.com/ipad-portrait-non-retina.jpg";
l=r===2?"http://example.com/ipad-landscape-retina.jpg":"http://example.com/ipad-landscape-non-retina.jpg";
document.write('<link rel="apple-touch-startup-image" href="'+l+'" media="screen and (orientation: landscape)"/><link rel="apple-touch-startup-image" href="'+p+'" media="screen and (orientation: portrait)"/>');
}
else{
p=r===2?"http://example.com/iphone-retina.jpg":"http://example.com/iphone-non-retina.jpg";
document.write('<link rel="apple-touch-startup-image" href="'+p+'"/>');
}
})
</script>
As you can see, this work is intended for the iPad/iPhone with variables for the device orientation and the device pixel ratio. But the problem is that for the iPhone with retina display, there's no variable to determine if is the i5 or the i4/4S, so it just download the image for the 960x640 iPhone.
Do you have any clue on how to include a variable for device screen size?
A better way to do this is to use media targeting, rather than JavaScript.
Done correctly, the iPhone will only ever retrieve the image appropriate to its screen size and pixel ratio, so there is no need to resort to JavaScript.
Media Targeting
This works for iPhones;
<!-- iPhone 2G, 3G, 3GS -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px)" href="apple-touch-startup-image-320x460.png">
<!-- iPhone 4, 4S -->
<link rel="apple-touch-startup-image" media="(-webkit-device-pixel-ratio: 2) and (device-width: 320px) and (device-height: 480px)" href="apple-touch-startup-image-640x920.png">
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px)" href="apple-touch-startup-image-640x1096.png">
And for iPads;
<!-- iPad 1, 2, Mini - Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png">
<!-- iPad 1, 2, Mini - Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-1024x748.png">
<!-- iPad 3, 4 - Portrait -->
<link rel="apple-touch-startup-image" media="(-webkit-device-pixel-ratio: 2) and (device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-1536x2008.png">
<!-- iPad 3, 4 - Landscape -->
<link rel="apple-touch-startup-image" media="(-webkit-device-pixel-ratio: 2) and (device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-2048x1496.png">
More information on these startup images can be found at Stuff & Nonsense.
This will cause the device to download only the image appropriate to it.
Measuring device height in JavaScript
If you must use JavaScript for any reason (and I do advise against it), you can retrieve the device's height with window.screen.height. On 3.5-inch devices, it will be 480, and on 4-inch devices, it is 568.
For more information on measuring the viewport in JS, see ResponseJS' guide.
I don't own an iPad 2, so I can't test this. Say I've developed an app that uses retina images only, as I made it compatible to iPhone 4 upwards only. Will they run on the iPad 2 in scaled mode?. Technically, the resolution of the iPad 2 non-retina display is larger than the iPhone 4 retina display. But I'm not sure how it will display. Has someone tested this?
The app will run in letter box, scaled size.
It will look the same as a non-retina iPhone app running on the iPad i.e. looking like an iPhone in the middle of the screen. The 'retina' pixels are downsampled to the lower resolution, and if you hit the '2x' button, the downsampled pixels are just doubled in size to fit the screen, even though they could, in theory, map 1-1 with the iPad's pixels.
I am currently working on an HTML5 app and I have used CSS media queries to target different devices, here is a sample of my code:-
<!-- iPhone -->
<link rel="apple-touch-icon" media="screen
and (resolution: 163dpi)" href="~/content/images/iOS-57.png" />
<!-- iPad (portrait) --><!-- iPad (landscape) -->
<link rel="apple-touch-icon" sizes="72x72" href="~/content/images/iOS-72.png" />
<!-- iPad (Retina, portrait) --><!-- iPad (Retina, landscape) -->
<link rel="apple-touch-icon" sizes="144x144" href="~/content/images/iOS-144.png" />
<!-- iPhone (Retina) -->
<link rel="apple-touch-icon" sizes="114x114" href="~/content/images/iOS-114.png" />
<!-- iPhone -->
<link href="~/content/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="~/content/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="~/content/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 (portrait) -->
<link href="~/content/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">
<!-- iPad (landscape) -->
<link href="~/content/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, portrait) -->
<link href="~/content/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">
<!-- iPad (Retina, landscape) -->
<link href="~/content/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 you want your app to look as ipad application you need to add universal property in target configuration. If target is only Iphone it will be shown always in small window.
I have the following code in the <head> of my web app, but I'm just getting a white screen on my iPhone 3GS while the DOM loads instead of the splash screen.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--STYLES-->
<!--SCRIPTS-->
<!-- iPhone LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h.png" sizes="320x480" media="(device-height: 480px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5+ LAUNCHSCREEN-->
<link href="includes/images/apple-launch-568h.png" sizes="640x1136" media="(device-height: 568px)" rel="apple-touch-startup-image">
How can I get my splash screen to display correctly on all versions of the iPhone? Code not shown, but my web app icons are working when added to the homepage. I'm using jQuery Mobile to build this web app.
I have also confirmed that the PNG images are exactly the correct sizes and I have deleted the web app icon, refreshed, and re-added to the homescreen multiple times. None of the solutions I've found on StackOverflow have worked for me. I have not tried the JavaScript solutions, because I'm sure there is a pure CSS solution.
The sizes attribute works for apple-touch-icons but it doesn't work for apple-touch-startup-images. The only way to target the startup images is with media queries. Adam's answer is good but relies on the <link>s being in a particular order since the media queries are under-specified. Here are the fully-qualified media queries:
<!-- iPhone -->
<link href="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="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="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 (portrait) -->
<link href="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">
<!-- iPad (landscape) -->
<link href="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, portrait) -->
<link href="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">
<!-- iPad (Retina, landscape) -->
<link href="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">
Also note that certain viewports will cause your web app to be letterboxed on the iPhone 5:
<!-- Letterboxed on iPhone 5 -->
<meta name="viewport"
content="width=device-width">
<meta name="viewport"
content="width=320">
<!-- Not letterboxed on iPhone 5 -->
<meta name="viewport"
content="initial-scale=1.0">
<meta name="viewport"
content="width=320.1">
I maintain a Gist with a minimal iOS web app, including startup images and icons. If you want some more commentary, I also wrote a blog post about iPhone 5 startup images.
Here are the dimensions to use:
<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone Tall (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg" rel="apple-touch-startup-image" sizes="640x1096">
<!-- iPad (portrait) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
I am trying to develop a web app which applies an appropriate style sheet depending on the device (and its orientation).
I have 5 media queries in total:
//for mobile phones in portrait mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css">
//for mobile phones in landscape mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css">
//for tablets (iPad) in portrait mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css">
//for tablets (iPad) in landscape mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css">
//for desktop computers
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">
Everything works on the Desktop, iPad and the iPhone (in both browser and web app versions) but the landscape media query fails on Android's browser? Any ideas? Have I got the 'max-device-width' wrong?
That's because most newer android phones are something like 480 wide by 800 tall depending on device, so the way you have yours written, Android Landscape should be picked up by the tablet landscape css. But I think I ran into a similar issue with Android not picking up the stylesheet, so I added this and everything seemed to work...
<meta name="viewport" content="width=device-width">
Do you have this in your head above your stylesheet links?
On the Droid1 - the viewport size is 320 x 569.
For web apps you can set the startup screen with apple-touch-startup-image
What about for iPads?
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
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.
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.
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 :(
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.
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.
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
It's the same as the iphone. Put a png named Default.png in the resource folder.