<< Firefox 16 is out (again) | Home | Media features of the most common devices >>

CSS, Media Queries and Retina problem

In the world of web design, we often talk about responsive design. The concept is really simple: Design your content to flow normally on a small screen (say, an iPhone), and then work your way up by adding so-called media queries to add stuff when you feel you have enough space to do so.

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 !

Avatar: tom

Re: CSS, Media Queries and Retina problem

Hi! Thank you for this very helpful resource. Here are the results for the Samsung Galaxy Note for your ever growing library: Mozilla/5.0 (Linux; Android 4.3; SM-N900V Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36 @media Stage 2 Dynamic CSS loading @media screen: yes @media print: no @media handheld: no @media projection: no @media tty: no @media tv: no @media aural: no @media braille: no orientation: portrait Stage 3 px dimensions width: 360px height: 615px device-width: 360px device-height: 640px mm dimensions width: 95mm height: 162mm device-width:95mm device-height: 169mm em dimensions width: 22em height: 38em device-width: 22em device-height: 40em resolution resolution: 288dpi resolution: 3dppx device-pixel-ratio: 0 -webkit-device-pixel-ratio: 3 -o-device-pixel-ratio: 0 -moz-(min-)device-pixel-ratio: 0 (min-)-moz-device-pixel-ratio: 0 color color: 8 color-index: 0 monochrome: 0 aspect-ratio aspect-ratio: 585/1000 Legend A feature supported. A feature unsupported. A feature supported but set to 'no'.
Avatar: pieroxy

Re: CSS, Media Queries and Retina problem

Thanks, I need to update the page with the latest test results.

Re: CSS, Media Queries and Retina problem

Hi, just thought I'd let you know that you have the mozilla prefix pixel ratio syntax incorrect, you have "(min)-moz-pix....." and "-moz-(min)-pix....." the correct syntax is the min without the brackets. So it should look like "(min-height: 500px) and (min--moz-device-pixel-ratio: 2)" and "(min-height: 500px) and (moz-min-device-pixel-ratio: 2)"
Avatar: pieroxy

Re: CSS, Media Queries and Retina problem

I didn't display the mins in all properties, but I had to display them for pixel ratio for firefox since both syntax min--moz-device-pixel-ratio and -moz-min-device-pixel-ratio exists. The test is good and everything works, but I agree that the label displayed is misleading.

Re: CSS, Media Queries and Retina problem

Hi does your test show results for min-device-width and max-device-width? If not, please can these be added?
Avatar: pieroxy

Re: CSS, Media Queries and Retina problem

Yes, the test shows a result called device-width. This can be used with min-device-width and max-device-width accordingly.

Samsung S5830i

Bit of a dinosaur but hopefully worth adding.