Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

I'm developing an existing Cordova app that I want to port to windows phone 8. After applying a few fixes for gradients and the viewport issue all seemed to work. Yesterday I've updated my phone (Lumia 520) to a newer version (8.0.10328.78) and suddenly the fixed footer is partly outside the viewable area of the screen.

I've reduced the code as much as I could and applied every variation of the device-width/device-height fixes I could find.

The most basic case appears even in the HTML5 sample app if only

<div style="position: fixed; bottom:0; left:0; right:0; background-color: red; height:30px;">footer</div>

is added to it. You can only see the top 10 pixels, unless you scroll down. Furthermore it's not like the footer isn't fixed, because if you create a very long page (multiple screen lengths) the footer will stay in that same spot (about 20 pixels out of view, until you've scrolled to the bottom completely) If you do scroll down completely the top 20 pixels of the header will be hidden.

The sample app already has the

@-ms-viewport{ width: 320px; }

in it by default. But actually the issue I'm seeing now it different than the one that was fixed by adding that. (in the old case, you would see the footer floating about 20pixels above the bottom, but even when the ms-viewport section is removed, that does not happen anymore.)

In addition I did a few measurements:

window.screen.height => 800
window.innerHeight => 512
window.outerHeight => 512
$(window).height() => 533
share|improve this question
up vote 3 down vote accepted

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.

share|improve this answer
    
I can confirm it fixes the issue. I already suspected it had something to do with that bar, just didn't think of disabling it. Not very nice to rob users from their clock and battery status, but it beats having to do without fixed positioning at all. (Of course by now I redid the app to work without a fixed footer) – Michielvv Nov 4 '13 at 17:42

old question but, as of Jan 2015 and as far as I know for Lumia 520+wp8.1,

<preference name="fullscreen" value="true"/>

in config.xml does the trick, leaving system tray in his place. You can put it in platform specifics

<platform name="wp8">
    <preference name="fullscreen" value="true"/>
</platform>
share|improve this answer
    
Thank you so much!!!! Your solution still works with cordova 4.2.0! – Tobias J. Feb 15 '15 at 14:34
    
Awesome find! You saved me a lot of hassle. – t8tortotlover Apr 25 '15 at 0:33
    
This solution was discussed here: intertech.com/Blog/windows-phone-ionic-cordova-viewport-issue And @spanna was attributed! – t8tortotlover Jun 12 '15 at 16:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.