Phonegap + Windows Phone 8 : viewport meta & scaling issue

Question

I'm currently working on a Phonegap app and I have the following problem when testing it with Windows Phone 8 (left screenshot below): the application bar is not removed and leaves a big white space.

From various sources I learned that the following meta tag is ignored by WP8:

<meta name="viewport" content="width=device-width, height=device-height">

So you have to define it again using the "ms" pre-tag:

@-ms-viewport {
    height: device-height;
    width: device-width;
}

But doing so kind of messes up with the scaling of the app. Any idea what is going on?

Here the before after screenshot:

Nefarious

This may help.[1] – Solander

I tried that as well, it didn't work for me unfortunately. – Nefarious

The viewport meta tag is not ignored, WP just (intentionally) returns wrong values for device-width and device-height, usually resulting in a scaling factor of 1.5 for better readability. – Dhow

@CedricReichenbach and is there a solution for this? – Nefarious

Not a simple one afaik. You can always set explicit values for device-width and device-height, which would be 480/800 for all WP7 and most WP8 devices. I've been experimenting with dynamically inserting the viewport meta tag from native app code (which obviously knows its screen dimensions), but dynamic meta tag changes seem to be ignored by the browser. Also see my related Question, especially the update on the bottom. – Dhow

Answer 1

Include this in Index.html,

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

Include this in CSS:

@viewport
{
width:320px;
}

@-ms-viewport {
width:320px;
zoom-user:fixed;
max-zoom:1;
min-zoom:1;
}

and include also this,

body, html { 
  -ms-overflow-style: none !important; 
}

This will solve the issue for now, it worked for me in the same situation..!! :-)

Epicureanism

This sort of works but I've still got two issues when using Phonegap Build 3.3.0 and a Lumia 820. There is a CSS rule being picked up which is for @media (min-width: 479px). Also, when rotating the screen to landscape mode the whole interface becomes "zoomed in" a lot, so from the left border of the screen I see about half (320px I guess). – Regenaregency

i fixed the min-width problem by using em's (body font-size px/min-width). Just the rotating to landscape that doesn't work for me with this fix. Anyone? – Regenaregency

What was your solution to the problem? – Trigon

Answer 2

You can take this code to your css:

* {
    zoom:1;
    -ms-content-zooming:none;
}

This solved the problem for me.

Ascendant

Answer 3

There is a plugin available for the viewport fix:

http://plugreg.com/plugin/lisovin/cordova-wp8-viewport

Epicureanism