h5bp/mobile-boilerplate — Issue #94: iOS startup images - reconsidered
Author: alexgibson
Created: 2012-01-30 16:16:36+00:00
State: open

I posted a while back about using CSS media queries to supply correct iOS startup images for all devices/orientations:

https://github.com/h5bp/mobile-boilerplate/issues/66

This was added as a part of mobile-boilerplate (thanks!) - but it has come to light that using this method means all images get downloaded to the device, regardless of it being the correct one :-(. This is somewhat unfortunate, and given that there will inevitably be a retina display iPad out at some point in the next year, it may be better staying with JavaScript in the long term - until Apple provide a better than half-arsed way to do this?

Currently I am using this in my JS to serve correct images for iPhone/retina and iPad (both orientations). It is messy (compared to using media queries), but at least more bandwidth friendly. I thought of using matchMedia, but this is unsupported on iOS 4.x devices, of which there are still quite a lot.

(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('' );
})();