Master list of high PPI mobile screens and how to detect/handle it via CSS?

2.9k views Asked by At

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!

UPDATE:

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!

1

There are 1 answers

3
mylesagray On

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.