I want to load higher resolution pictures for iPhone 4 users, but the only way I know of detecting users is by a user-agent. But I'm under the impression that the user-agent of MobileSafari on any iOS4 phone is the same across the board.
What could I do to detect an iPhone 4?
using the HTTP_USER_AGENT string you could probably figure out which one it is. I have never try it but if should get you started. Also ive seen a couple of php library that will do it for you. hope this helps. cheers.
You can use CSS3 media queries to detect the iPhone 4's device-pixel ratio (how many CSS pixels equal a physical display pixel). Then, you can use CSS to load higher-resolution images instead of the normal ones.
In the <head> tag on your web page, add this to reference an external stylesheet that will only be loaded for iPhone 4 users:
<link rel="stylesheet" type="text/css" href="high_res.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
The media attribute specifies to only use this stylesheet for devices with a minimum device-pixel ration of 2 (ie. the iPhone 4). Then, you can add CSS rules in high_res.css to replace low-res images with high-res versions:
#highres-if-possible {
background-image: url(high_res_pic.png);
}
Note that you will have to specify the image in HTML by using the CSS background-image property instead of the src attribute. Example: For a 60x50 image, replace:
<img id="highres-if-possible" src="low_res_pic.png">
with
<img id="highres-if-possible" style="width: 60px; height: 50px; background-image: url(low_res_pic.png);">
No guarantee that specifying images like this will work in all browsers (Internet Explorer), but it should work fine in standards-compliant browsers (and on the iPhone).
For more info on CSS3 media quieries and using them to detect the iPhone 4, see: http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
UPDATE: I came across this post and this post that might have a better way to handle specifying the images using CSS (using <img style="background-image:url(http://...)"> instead of <img src="http://...">) than what I have above.