0

I've implemented em's throughout all my mobile CSS, and I just set the font-size once on the body tag based on device-pixel-ratio to either 16px (ratio: 1), 24px (ratio: 1.5), or 32px (ratio: 2) etc., but when I open my site in Chrome on Android, it catches the 1.5 ratio in the CSS (correct for this device), but everything is 1.5 times larger than in Dolphin or stock Browser.

Any idea what's going on there?

bearfriend
  • 10,322
  • 3
  • 22
  • 28

1 Answers1

0

This is the result of Chrome for Android removing support for target-densitydpi. This seems like quite an obtuse decision to me, but it is what it is. The mostly-working solution is to manually detect Chrome/Android version 25+ and change my zoom level to 1/devicePixelRatio.

bearfriend
  • 10,322
  • 3
  • 22
  • 28
  • target-densitydpi has not been supported outside of Android and no-one on the web uses it that much because of that reason. If you have a viewport set to device-width, or initial-scale=1.0 you shouldn't have to do anything.... to note, fonts without viewports properly set sometimes have "font-boosting" applied. – Kinlan May 30 '13 at 21:19