Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to discern an iPhone 3G/S visitor to an iPhone 4 visitor?

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?

like image 366
dallen Avatar asked Aug 09 '10 00:08

dallen


1 Answers

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 queries 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.

like image 62
jhartz Avatar answered Nov 02 '22 06:11

jhartz