I have this in the head section of index.php
:
<link rel="apple-touch-startup-image" href="images/screenLD.png" media="(device-width:320px)" /><!--iPod/iPhone Portrait LD 320x460-->
<link rel="apple-touch-startup-image" href="images/screenHD.png" media="(device-width:320px)and(-webkit-device-pixel-ratio:2)" /><!--iPod/iPhone Portrait HD 640x920-->
<link rel="apple-touch-startup-image" href="images/screenPortraitLD.png" media="(device-width:768px)and(orientation:portrait)" /><!--iPad Portrait LD 768x1004-->
<link rel="apple-touch-startup-image" href="images/screenLandscapeLD.png" media="(device-width:768px)and(orientation:landscape)" /><!--iPad Landscape LD 748x1024-->
<link rel="apple-touch-startup-image" href="images/screenPortraitHD.png" media="(device-width:1536px)and(orientation:portrait)and(-webkit-device-pixel-ratio:2)" /><!--iPad Portrait HD 1536x2008-->
<link rel="apple-touch-startup-image" href="images/screenLandscapeHD.png" media="(device-width:1536px)and(orientation:landscape)and(-webkit-device-pixel-ratio:2)" /><!--iPad Landscape HD 1496x2048-->
And this in cache.manifest
:
CACHE MANIFEST
index.php
images/screenLD.png
images/screenHD.png
images/screenPortraitLD.png
images/screenLandscapeLD.png
images/screenPortraitHD.png
images/screenLandscapeHD.png
But we can easily understand that an iPhone user will need to cache 5 other useless big images.
How can I do so that he only caches the images he will need?
BTW, for those who want splash screen code that work on every apple device, mine is perfect.
Using a python/php script, check the User-Agent string of the device. Then serve different versions of cache.manifest
with the cache listings necessary for a specific device. If the User-Agent string is malformed or unknown, then serve the one above that has everything.
Example:
cache_manifest.php
echo
') the LD/HD files for the given device. A user agent string will not allow you to accurately determine whether the device has a retina display.RewriteRule
from /cache.manifest
to cache_manifest.php
Htaccess
file would look like:
RewriteEngine On
RewriteRule ^cache\.manifest$ /cache_manifest.php [L]
An iPhone user agent string will look like this:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5
An iPad user agent string will look like this:
Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5