Adjust Phonegap app UI without target-densitydpi=device-dpi

Question

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?

Answer 1

I found the solution using jQuery

I added the following code and it works as expected now, (I've added id='viewport' to my meta html tag)

var viewportScale = 1 / window.devicePixelRatio;
$("#viewport").attr("content","user-scalable=no, initial-scale="+viewportScale+", minimum-scale=0.2, maximum-scale=2, width=device-width");

This will support screens with window.devicePixelRatio ranging from 0.5 to 6