Home/ Questions/Q 991221
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:04:30+00:00

I want to load higher resolution pictures for iPhone 4 users, but the only

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 60×50 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.

    • 0