Chrome (for Android) Media Queries doing it all wrong?

Question

I am quite familiar with media queries but I ran into serious problems ...! Using the latest version of Chrome (26.0.1410.58) for Android I recognized that it reports all sizes related to the viewport and device in DIPs!

This seems totally wrong to me as logically in CSS there are no DIPs only CSS pixels!

I use my Samsung Galaxy S (I9000) for testing. The phone has a screen size of 480 x 800! Chrome reports window.screen.width as 320 and the window.devicePixelRatio as 1.5! The Android (4.2.2) Browser on the other hand report the screen size (correctly) as 480 x 800 and the same devicePixelRatio!

So even when it comes to media queries Chrome uses these (DIP) values, which make any width/ height dependend media queries unusable, as you have no chance to get the real (in CSS pixel) screen size!

Even a media query using 'min|max-device-width|height' does respond to these (DIP) values which is without any doubt at least not what they are made for!

So as soon as a device pixel ratio is greater than 1.0 things are going "wrong", because the only chance to get the "real" values is to multiply the reported values with the devicePixelRatio (which cannot be done with CSS).

What makes me wonder is that the latest native Android browser, which is also based on the Webkit engine, does it IMHO correct.

So my questions are:
- Can anybody confirm Chrome's behaviour?
- Is this intended or a bug?
- Why do Chrome and the Android browser behave differently?
- Any possible solution or workaround to overcome the problem?

Here are two additional links for quick online testing:
http://responsejs.com/labs/dimensions/
http://cssmediaqueries.com/overview.html

Also interesting might be the following article:
Viewport target-densitydpi support is being deprecated

So let's hope that support for the new @viewport rule will come ASAP ...!

Many thanks in advance,

Gunther

Answer 1

This is a some what difficult thing to explain without pictures, so bear with me.

CSS Pixels - My understanding is that CSS Pixels are essentially dips - or at least meant to be treats that way (i.e. they take into account the pixel density).

Imagine setting the text size to 10px, on a density ratio of 1, you'd get 10 screen px. On a screen with a density ratio of 2, you'll actually be getting 20 screen px. While this doesn't equate to being the same size, it should at least make them comparable.

Now relate this to your question - why does this with media queries?

Consider the following:

Pixel Density Actual Screen Size Media Query Sees 1 320 x 480 320 x 480 1.5 480 × 800 320 x 533 2 768 x 1280 384 x 640

To cover all of these devices with media queries, you need to set a boundary at ~390 CSS px mark.

If you were to attempt to do this with device width you would need a boundary at around 770 px and that is very close to 7" tablets and I am sure the line overlaps for devices already.

Answer 2

There is consistency across browsers and what you are trying to do is possible, but I think it'll lead to serious problems further down the line.

---

Netsurfer: To me it seems already illogical to use "device independent" values in the CSS context, which is all about the presentation on a specific device.

This isn't correct, the web is designed to work across a range of devices, not a specific device or size.

---

I put this example together which illustrates the following:

1. The size of the viewport based on CSS Pixels (document.documentElement.clientWidth)
2. Shows the devicePixelRatio (which works on Chrome for Android and iOS Safari - haven't tested on other browsers)
3. Calculates the devices screen size in hardware pixels.

http://jsbin.com/icikam/7/edit

var valueTests = [
  {
    name: 'document.documentElement.clientWidth',
    value: document.documentElement.clientWidth
  },
  {
    name: 'window.devicePixelRatio',
    value: window.devicePixelRatio
  },
  {
    name: 'calculated screen width',
    value: Math.floor(window.devicePixelRatio * document.documentElement.clientWidth)
  }
];


var statsTable = document.querySelector('.useful-stats');

for(var i = 0; i < valueTests.length; i++) {
  var row = statsTable.insertRow(i);

  var nameCell=row.insertCell(0);
  var valueCell=row.insertCell(1);
  nameCell.innerHTML=valueTests[i].name;
  valueCell.innerHTML=valueTests[i].value;  
}

I've tested this on an iPhone 5, iPad mini, iPad 3, Nexus 10, Nexus 7, Nexus 4.

If i put the results in order of CSS pixels and compare that to the list sorted by device pixels I get the following results:

https://docs.google.com/spreadsheet/ccc?key=0Ak9A3nqyETcedFduUEVhcmFVcUl2cWRWU201cFlYV3c&usp=sharing

If you had to pick breakpoints to change styles for devices, you'll see it makes more sense to base this on CSS Pixels as it roughly groups mobile devices and tablets together. Based purely on screen pixels, you'll see that Nexus 4 and the iPad Mini should have the same UI, which is going to lead to one of those devices users getting a poor user experience.

Answer 3

in the meantime I got some more clarity.
The "problem" (mainly with Webkit based browsers, but also i.e. with Firefox) is that the (visible) viewport size is measured in DIPs (though the unit also is 'px') instead of CSS pixel.

In former times on Android one had the possibility to 'override' this behaviour by using 'target-densitydpi=device-dpi' in the meta tag. Webkit (and therefor also Chrome) has removed the support for this (proprietary) option.

Doing so means that you are no longer able to display a page in the resolution size of a device (as soon as the device pixel ratio is greater than 1.0), because values like screen width and hight are no longer screen pixel or CSS pixel but DIPs!

So the question is what does 'px' mean in a certain context?
Without doubt and conforming to the actual secifications all 'px' values in HTML + CSS have to be treated as CSS pixel.

So what is a 'CSS pixel'?
IMHO a CSS pixel has to be the same as a screen pixel (not physical/ device pixels), because 'device-width|height' in 'px' should be equal to the resolution of a screen and not be equal to somewhat "arbitrarily" values, which are totally "irrelevant" to any webdesigner!

But unfortunately this is exactly what Apple (Webkit) does! To make it even worse even with Javascript's screen.width/height you won't get the resolution of the device, but still the viewport size in DIPs.

To me it seems already illogical to use "device independent" values in the CSS context, which is all about the presentation on a specific device. So why should anybody ever being interested in "device independent" values?

Also the actual draft for the new viewport at rule (http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule) says:"This example sets the viewport to fit the width of the device."
And here is the example: @viewport { width: device-width; }

Further down the page 'device-width' is defined as:"The width of the screen in CSS pixels at zoom factor 1.0."

According to Apple's approach this means that a CSS pixel is equal to a device independent pixel (DIP). Or the other way round they may argue: No, your screen is only of a certain width (in CSS pixels, other than the resolution). But therefor there is the 'auto' value for the width descriptor.

So no matter which way round, in the end IMHO they are doing it completely wrong!