Quite limited: Device-aspect-ratio

In the CSS3 media queries specification, there is a property named device-aspect-ratio, which, in it’s current state is only of limited interest.

The specification says:
bq.. The “device-aspect-ratio” media feature describes the aspect ratio of the output device. The value consists of two positive integers separated by a “/”.
In this specification, aspect ratio is defined as the number of horizontal pixels over the number of vertical pixels.
p. What’s wrong here? The device aspect ratio, is not actually a device aspect ratio, but rather the number of horizontal pixels, divided by the number of vertical pixels.
h3. Oddball resolutions
In his blog, Karl Ove Hufthammer pointed out that “you should avoid 1280×1024 on CRT(Cathode-Ray Tube) displays.”:http://blogg.huftis.org/arkiv/2004/11/27/173/ (Norwegian only. Sorry). The explanation is quite simple:
A CRT display usually has a _physical_ width/height ratio of 4/3, something reflected in most display resolutions:

Resolution Width / Height Pixel dimensions
800×600 4/3 1/1
1024×768 4/3 1/1
1152×864 4/3 1/1
1280×960 4/3 1/1
1280×1024 CRT 5/4 15/16
1280×1024 LCD 5/4 1/1
1600×1200 4/3 1/1

Because most CRT displays have a _physical aspect ratio_ of 4/3, the 1280×1024 resolution will have pixels that are rectangular, instead of quadratic. This means that images, fonts and everything will appear somewhat distorted, looking too wide.
On an LCD(Liquid Crystal Display) display with 1280×1024 as native resolution, the pixels are quadratic, because _the physical aspect ratio of the display matches the resolution._
And it’s here the problem with device-aspect-ratio begins. Let’s consider this hypothetical example:
bc. In a geometrical square,
all four sides are the same length, and
all four angles are right angles
Now, what if we wanted to make this image appear square on all displays, even the malconfigured 1280×1024 CRT displays?
If device-aspect-ratio had worked like I think it should, one could have used CSS like this, to correct the pixel anomaly:
bc. @media all and (device-width: 1280px) and
(device-height: 1024px) and (device-aspect-ratio: 4/3){
#geosquare {
width: 213px;
height: 200px;
This should read as: _For displays with 1280×1024 resolution where the actual physical aspect ratio of the display is 4/3, correct the pixel value, so that the square appears square._
Unfortunately, this rule will _never_ match, since 1280 / 1024 = 5 / 4.
Another approach could have been the hypothetical CSS property pixel-aspect-ratio:
bc. @media all and (pixel-aspect-ratio: 15/16){
#geosquare {
width: 213px;
height: 200px;
This is a potential issue on a number of displays: My old cellphone had a pixel-aspect-ratio of 15/16. Some plasma displays have a native resolution of 1024x1024px on 16/9 displays (even if they mostly run on a non-native resolution), and CSS offers us no way out of this mess.

Leave a comment


  1. What about widescreen LCD panels? What about the resolution 1152 x 864? (I used that on a CRT and it seems to be a popular resolution. Can you add it to your list?) What if a new screen comes out with a different resolution? I’ve just seen Dell advertising a laptop with a ’17-inch’ display sized at 1440 x 900. CSS should look at the vertical and horizontal pixel width and height certainly, but anything is possible with the aspect ratio!

  2. Widescreen displays generally comes in two flavors: either 16/10 or 16/9.
    The display I’m using now, for instance is a 16/10 LCD with resolution 1280×800 – this means that the “pixel aspect ratio” still is 1/1.
    The Dell display you are refering to is most likely also a 16/10 display (I believe most widescreen LCD panels are 16/10) – which means its pixels will be square.
    I have added 1152×864 to the list.

  3. Thanks Arve. I just tested a CRT monitor and it has one setting of 1280 x 720. I tried that and also 1280 x 1024, but I don’t think there is a problem here! Why? Because such modes don’t leave the pixels unsquare – instead they add black bands to the side or to the top and bottom. This is the solution to maintain the aspect ratio needed. Only if the user resizes the screen to use all maximum space will they see distortion. (Well, 1280 x 720 was squashed on my screen but there was room to alter it.) Think of a widescreen TV showing a non-widescreen picture with black bands at either side instead of stretching it.

  4. bq. I just tested a CRT monitor and it has one setting of 1280 × 720. I tried that and also 1280 × 1024, but I don’t think there is a problem here! Why? Because such modes don’t leave the pixels unsquare – instead they add black bands to the side or to the top and bottom.
    That is not entirely correct. My old IBM laptop had two choices for non-native resolutions: You could either let there be black bands, as you described, or it used stretch-to-fit, leaving you with aspect-ratio problems.

  5. Ah, but that is a TFT screen. On a CRT screen you can use the monitor controls to get the desktop image to whatever size you wish, by stretching it upwards or sideways into the black bands.