title: Chrome (for Android) Media Queries doing it all wrong?
body: <p>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!</p>
  
  <p>This seems totally wrong to me as logically in CSS there are no DIPs only CSS pixels!</p>
  
  <p>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!</p>
  
  <p>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!</p>
  
  <p>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!</p>
  
  <p>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).</p>
  
  <p>What makes me wonder is that the latest native Android browser, which is also based on the Webkit engine, does it IMHO correct.</p>
  
  <p>So my questions are:<br>
  - Can anybody confirm Chrome's behaviour?<br>
  - Is this intended or a bug?<br>
  - Why do Chrome and the Android browser behave differently?<br>
  - Any possible solution or workaround to overcome the problem?</p>
  
  <p>Here are two additional links for quick online testing:<br>
  <a href="http://responsejs.com/labs/dimensions/" rel="nofollow">http://responsejs.com/labs/dimensions/</a><br>
  <a href="http://cssmediaqueries.com/overview.html" rel="nofollow">http://cssmediaqueries.com/overview.html</a>  </p>
  
  <p>Also interesting might be the following article:<br>
  <a href="https://petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/" rel="nofollow">Viewport target-densitydpi support is being deprecated</a>  </p>
  
  <p>So let's hope that support for the new <a href="http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule" rel="nofollow">@viewport rule</a> will come ASAP ...!</p>
  
  <p>Many thanks in advance,</p>
  
  <p>Gunther</p>