Take the 2-minute tour ×

The iPhone 4's Retina display is double the density of of the iPhone 3, but Apple handled it fairly nicely but just making an assumption and doubling the pixels when rendering (so that your web page looks the same physical size on each device). You can then use some webkit media queries to load additional CSS just for that device (-webkit-min-device-pixel-ratio:2).

The question: Is there a resource that a) lists the other mobile devices that are now using high PPI screens b) what the device does by default in terms of rendering web sites and c) if it supports the webkit check and/or it's own custom detection method?

If not, perhaps this post could become that resource (CW) by posting info on specific devices as answers. I have to start dealing with BlackBerry and Nokia devices that are using the high res screens (and Android coming along). Any data appreciated!


After some testing, I'm finding that there really aren't any other mobile devices that identify themselves as double-density as the iPhone 4 does. There are screens with much higher PPIs now (often on smaller devices) but the device doesn't in any way declare itself as high PPI. Perhaps a better way to explain it is that those devices just have 'really small pixels'.

As such, there really isn't a practical way to handle those devices given that ALL sites are rendered the same, so any attempt at modifying yours will likely interfere with the user's own preferences and settings.

If anyone knows of any devices other than the iPhone 4 that properly declare themselves as high PPI, let me now!

share|improve this question
add comment

1 Answer

See here for a similar quesiton:

How to target iPhone 3GS AND iPhone 4 in one @media query

I asked it a few days back, I don't think there is a list of such things but if you know the devices you want to target it is not hard to find out and thus target these devices.

The best detection method is to use CSS3 @media queries, and given that Opera is the most popular mobile browser it is a safe assumption to use the webkit extension along side the @media queries.

share|improve this answer
that's only addressing the iPhone 4, which is easy to detect. I need to figure out what other devices are using the high PPI screens (BlackBerry Storm, Nokia Mini, etc.) and how to best check for that. Screen resolution isn't necessarily enough to go on. WURFL might help, but ideally I'd handle this client side if at all possible. –  DA. Feb 23 '11 at 17:41
True but users that have BB/Nokia/HTC etc more often than not use Opera (thus supporting webkit) another extension you can use is: max-device-width to deal with High PPi displays. –  Myles Gray Feb 23 '11 at 17:44
While they may use a variant of webkit, they're not making the same assumptions as mobile safari is, so that's my concern. I'm going to do some testing and will report results. –  DA. Feb 23 '11 at 18:46
add comment

Your Answer


