iOS startup images using CSS media queries
| CSS
Ever since the arrival of the iPad and iPhone 4, serving correctly sized apple-touch-startup-images for iOS web apps has been somewhat problematic, especially if you wish to cater for every type of iOS device.
A common solution has been to use JavaScript to detect what device the user is on, and then to write the correct image into the <head> of your HTML file.
<!-- iOS App Splash Screen -->
(function () {
var filename;
if (navigator.platform === 'iPad') {
filename = window.orientation === 90 || window.orientation === -90 ? 'splash-1024x748.png' : 'splash-768x1004.png';
} else {
filename = window.devicePixelRatio === 2 ? 'splash-640x920.png' : 'splash-320x460.png';
}
document.write('<link rel="apple-touch-startup-image" href="' + filename + '"/>' );
})();
</script>To make things more complicated, you also need to serve a high-res startup image for the iPhone 4's retina display. The iPad requires two different splash screen images for each orientation as well. Things quickly start to get a bit messy…
As of iOS5, you can now use CSS Media Queries to serve each type of startup image required, so no need for JavaScript anymore!
Just use any of the following media queries in the <head> of your HTML file.
<!-- 320x460 for iPhone 3GS -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="startup-iphone.png" />
<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="startup-iphone4.png" />
<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="startup-iPad-portrait.png" />
<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="startup-iPad-landscape.png" />If you are on iOS5 you can check out an online demo here. Add the web page to your home screen and then launch from the icon.
Caveat
The only drawback to this CSS only method is that every image seems to be downloaded, regardless of which one is used on the device. If your application is supporting both iPhone and iPad, it may be worth using the JavaScript solution still. But the choice is yours to make, depending on the number of files and their respective sizes. Hopefully Apple will eventually support another solution to serving the correct file, such as using the sizes attribute.
Like this article? Share on Twitter.
Pixel perfect icons for iOS devices using CSS Media Queries
| CSS
Jesse Dodds has written an excellent article on how to serve pixel perfect web clip icons for Apple iOS devices using CSS3 Media Queries. Well worth a look.
<!-- iPHONE 3G WEB CLIP ICON -->
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="iOS-57.png" />
<!-- iPAD WEB CLIP ICON -->
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="iOS-72.png" />
<!-- iPHONE 4 WEB CLIP ICON -->
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="iOS-114.png" />Like this article? Share on Twitter.
Targeting iPhone 4 using CSS Media Queries
| CSS
With the release of iPhone 4 and it's 326ppi display, there has been a fair bit of speculation as to what impact this would have on mobile web apps and websites that are optimised for mobile screen sizes. How would web developers target both older iPhones with a 480x320 display, as well as the iPhone 4's 960x640 display? Would we need separate CSS stylesheets for each device? How would images need to be optimised for the new screens?
It turns out that CSS media queries targeting 320px screens still work on iPhone 4. It's all down to Mobile Safari utilising a 'device to pixel ratio' density of 2. There is actually a distinct difference between a device (screen) pixel and a pixel that we typically define in CSS. For example, when the iPhone 4 browser viewport is equal to the device width, 1 CSS pixel actually translates to 2x2 device pixels. For those interested, there is a quite old (but very relevant) Webkit article about high dpi websites. It makes for an interesting read.
This is largely good news for mobile web developers, as very little needs to be done to our mobile CSS stylesheets for iPhone 4. Device pixels are translated to CSS pixels automatically. But what about images? Well, this is where some work needs to be done. In order for images to look crisp on the new iPhone 4 display, we now need to serve images that have a higher ppi than the standard web traditionally uses. To do this, the iPhone 4 (and any other high ppi device) can be targeted using the following CSS media query (Notice I have included rules both with and without the -webkit venor prefix).
Update (07/10/11) - the code below has now been updated to include additional vendor prefix properties, that did not exist at the original time of publishing this article.
/* High PPI Devices ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
//high resolution images go here
}
I won't go into great detail on how to best serve images, but it basically involves creating images that are double the pixel size that you would traditionally need (e.g. a 100x50 pixel image translates to 200x100 pixels). You can then set the background size in CSS so the large images still take up the same number of CSS pixels as they would on a normal display. Walt Dickinson has already written a nice article that has some more info on how to do this.
Finally, one last tip – you can also test for the same value using using JavaScript:
if (window.devicePixelRatio == 2) {
//Targeted code goes here
}Like this article? Share on Twitter.
Adaptive CSS layouts using Media Queries
| CSS
(Update 10/10/11) This an old blog post, and is no longer true to the way this site is built. If you would like to read about more current techniques, check out the article on mobile first, responsive design.
Over the past few weeks I have been refining the CSS3 Media Queries on this site in order to try and create an adaptive layout that can scale and resize to any window or screen size, whether it be on desktop, tablet or mobile device. I think (hope) that I've got things flowing pretty smoothly now, so I thought I would post the queries here so that others can adapt them:
<!-- CSS MAIN STYLESHEET -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- LAYOUTS SMALLER THAN 650px AND MOBILES -->
<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-width: 650px), screen and (max-device-width: 480px)" />
<!-- LAYOUTS BETWEEN 651px/1024px AND iPAD -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width:651px) and (max-width: 1024px), screen and (min-device-width: 768px) and (max-device-width: 1024px)" />
I could have included all three media queries inside a single CSS file using the @media rule, but I quite like to keep things separate for simplicity. For now, I have chosen to use three individual stylesheets. The main site stylesheet (styles.css) is used as a master, and then the separate mobile.css and tablet.css stylesheets override certain CSS rules in the main stylesheet, to provide an optimised view that is dependant on the media query being used. I have also used queries based on both min/max-width and min/max-device-width, so that both desktop browsers and intermediate size devices can also make use of the adaptive stylesheets. Have a go at resizing your browser window to see the results.
Like this article? Share on Twitter.