I have created an app using Phonegap for the Android platform. To compensate for different device resolutions (dpi) and screen sizes, the dimensions of all UI elements have been specified in terms of em. Then I am using CSS media queries to set a different base font size using -webkit-device-pixel-ratio. Everything used to work fine and as expected until I found out that target-densitydpi=device-dpi is deprecated by webkit and support will be removed in future. Here is my meta viewport tag before removing the target-densitydpi :
<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, target-densitydpi=device-dpi">
I found when I remove target-densitydpi, the app no longer looks as expected, in fact the dimensions of viewport decreases dramatically. Here are the before and after screenshots taken on Xperia L (Android 4.1.2) having a width of 480px and window.devicePixelRatio of 1.5:
before removing target-densitydpi : http://imgur.com/c0Vnusk
after removing target-densitydpi : http://imgur.com/06mnUlJ
The app is supposed to look like the former screenshot without target-densitydpi, but I am really lost on how to achieve that? Will it require rewriting of CSS values? Is there a way to enforce target-densitydpi=device-dpi without using the meta tag?