Looks simple, doesn't it? Theory always does.

The question: Do you want the same design on a Galaxy S III (a 4.8 inch smartphone) than on your 1024x768 laptop (13 inch) ? Or your iPad? Well... of course not ! Yet, the Galaxy S3 has a larger resolution than the iPad. So, how do you differentiate between those devices with a media query? Well, there is no definitive answer. It depends.

At our disposal, to detect a size / nature of devices, you have several media features:

• width* describe the width of the viewport on a mobile.
• height* describe the height of the viewport on a mobile.
• device-width* describe the width of the screen on a mobile
• device-height* describe the height of the screen on a mobile
• orientation 'portrait' when the height value is greater than width, 'landscape' otherwise.
• aspect-ratio* width / height
• device-aspect-ratio* device-width / device-height
• color is useless on our case.
• color-index is useless on our case.
• monochrome is useless on our case.
• resolution* the density of the screen.
• scan meant for TVs, useless for us.
• grid means to be able to differentiate text-based devices (ttys) from pixel-based devices. Useless for us.
• device-pixel-ratio* Not in the spec and prefixed (-webkit-min-device-pixel-ratio, min--moz-device-pixel-ratio, -o-min-device-pixel-ratio)
• Note: * items mean they can be prefixed with "min-" or "max-".

Looks pretty straightforward so far. So where is the problem?

On iOS, things are simple. The first iPhone was 320x480 pixels and the iPhone 4 doubled that: 640x960 pixels. But in terms of CSS, still looks like it's a 320x480 pixels device. You can target the retina devices by using the device-pixel-ratio which is 2 in this case.

On Android, well, all devices manufacturers do as they please. Most do the right thing, some don't. But some things don't work as they do on iOS. For example, device-width and device-height don't behave the same way. On iOS, it always show the small dimension as the device-width. On Android, it depends on the orientation of the device.

Hence the problem...

So I have setup a test page to help gather data on the various devices out there. It will tell you (within reasonable margins) the different values for the different media features. It will also help you understand how the device you have in your hands react to the various media features.

Take the test !

Responses[7]

Posted by pieroxy on October 15, 2012 1:31:00 PM PDT #