Phonegap + Windows Phone 8 : viewport meta & scaling issue

cordova, css, html, windows-phone-8

Solution

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..!! :-)

Problem

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:

Original source

Related problems