Phonegap + Windows Phone 8: Viewport Meta & Scaling Issue

White space at bottom in Windows Phone 8 phone gap app

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

windows phone 8 HTML5 viewport is higher than the screen after update to 8.0.10328.78

I have been having this issue in a Cordova/PhoneGap app as well. I even see the issue in Windows Phone 8 HTML5 apps when I am not using PhoneGap (just create a new project in Visual Studio 2012 from "Templates -> Visual C# -> Windows Phone HTML5 App"). This issue does not appear if you are loading the same HTML5 code from a hosted site using the IE app on Windows Phone 8.

The only thing that I have found to get the viewport to work correctly is to hide the system tray.

In MainPage.xaml change

shell:SystemTray.IsVisible="True"

to

shell:SystemTray.IsVisible="False"

This hides the system tray and makes your app a fullscreen app.

For some reason when the app is full screen the viewport behaves as expected.

Windows Phone screen height in PhoneGap app not 100%

I tried using device-height in the viewport meta tag, however I learned that IE doesn't support that tag. Then after my 100,000 google search, I found this page.

After adding this to my CSS:

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

and adding this to a JavaScript file that hits all of my pages:

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");

    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:auto!important}"
        )
    );

    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{height:device-height!important}"
        )
    );

    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}

Then my 100% body height started acting the way that I would expect it to.

---

Related Topics