want to shrink cordova App display output

Question

I created a web-app, with a target of a Nexus 4 phone in mind, intended to be used in landscape orientation. It looks fine using chrome. But when I then used that HTML/CSS to create a Cordova App, the display is way too big for the phone. I have tried many things suggested by many people to no avail. As an example, if I have the following div defined:

#content {
    border:             thin ;
    border-style:       solid ;
    width:              960px ;
    height:             475px ;
}

and as a web-app, the border fits nicely in the display of the Nexus 4 using chrome. But I have to reduce that 960px down to around 570px to get it to fit when it is a App installed via cordova. I am doing a 'fixed' position for all my divs inside that #content div. There is only 1 target device that this App will get used on - I don't care about any other devices. (Yes, I really want to do that). I don't want scrolling.

I tried setting the target-densitydpi=medium-dpi" as suggested in Phonegap/Cordova App Shrink too small on high resolution device like Samsung Galaxy S4 and Phonegap Application text and layout too small

I've tried setting initial-scale=1.0 like many people suggest. I've tried 1.5 and 2.0 which makes it even bigger, but 0.5 does not make it smaller. I tried adding preference name="EnableViewportScale" value="true" to my config.xml as suggested by PhoneGap: Scaling down a webpage with viewport

While I have tried many combinations, my basic viewport definition is:

    <meta name="viewport" content="user-scalable=no,
        initial-scale=1, maximum-scale=1, minimum-scale=1,
        width=device-width, height=device-height,
        target-densitydpi=medium-dpi" />

Nothing has worked for me.

I have no idea how this stuff works and I have very little experience with front-end and mobile App technologies. I see no relationship between the advertised hardware devices resolution and what I see on a web-app, and what I see on a native App. I don't know why they would behave differently on the same device with the same CSS.

Any suggestions and/or pointers would be greatly appreciated.

score 0 · Answer 1 · edited May 23 '17 at 12:28

I found a solution at Android 4.1 viewport scaling ( setInitialScale, meta initial-scale not working) (although there is a missing opening curly bracket).

By using:

function customScaleThisScreen() {
    var contentWidth = document.body.scrollWidth, 
        windowWidth = window.innerWidth, 
        newScale = windowWidth / contentWidth;
    document.body.style.zoom = newScale;
}

and setting my viewport to:

    <meta name="viewport" content="user-scalable=no,
        initial-scale=0.6, maximum-scale=0.6, minimum-scale=0.6,
        width=device-width, height=device-height,
        target-densitydpi=medium-dpi" />

it now fits within my Nexus 4 screen. Although the height (in landscape mode) comes a bit short of what I ideally wanted, the entire display is shown. It uses up about 90% of my available height which I can live with.

I also found that setting:

<preference name="EnablEnableViewportScale" value="false" />

in config.xml does nothing - whether I set it to true or false. Before, I was able to scale upwards of 1.0 (such as 2 and 4), but not below 1.0, no matter what EnableViewportScale was set to. But the above code solved this. I am running Android 4.4.4

want to shrink cordova App display output

1 Answers1