How can I change Phonegap Android app target-densitydpi dynamically?

Question

I'm developing an android app using Phonegap. I finished developing it on a 320px * 480px viewport dimensions. In order for the app to work on all screen sizes I used target-densitydpi=low-dpi in the viewport metatag but I found a problem in testing the app on Samsung S4 device. The problem was that the full screen images are not displayed in a very low quality although they are high.

I googled this problem and found that in order for the images to show on Samsung S4 in the same quality I should change target-densitydpi=low-dpi to target-densitydpi=device-dpi and this solved the problem but I found that I have to redesign the whole app to support all the screen sizes.

I'm asking is there a way to change the target-densitydpi dynamically using Javascript so I can make it equals device-dpi when the user open the full-screen image then return it back to low=dpi when he close the full-screen images?

I tried to put the images in a separate html file with target-densitydpi=device-dpi and make a link using tag to the new html file but the transition was too slow (takes about 5 seconds to open).

Any suggestions?

Adam Stanley Adam Stanley · Accepted Answer · 2014-01-27T18:23:04

You can create your viewport using JavaScript before the page has loaded.

The following knowledge base article is an example of how to do this (to support BlackBerry 10 smartphones): http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a-BlackBerry-WebWorks-application/ta-p/1943807

You can extend this example to address your requirements like this:

<head>
    <script>
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    if (isS4) {
        meta.setAttribute('content','target-densitydpi=device-dpi');
    } else {
        meta.setAttribute('content','target-densitydpi=low-dpi');
    }
    document.getElementsByTagName('head')[0].appendChild(meta);
   </script>
</head>

How can I change Phonegap Android app target-densitydpi dynamically?

1 Answers