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?
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
.