Q:

Fixed footer issue on WP8 Emulator

I have used a fixed footer in one my HTML5 web-app. It works fine on IE10 phone browser, but when I try it out on WP8 Emulator using web-view 
mainBrowser.Navigate(new URi("http://jqtouch.rediffmailpro.com/iScroll/win8Example1.html",URiKind.Absolute));

It leaves a gap at the bottom.
I read it somewhere, and edited the meta tag to include the height.
<meta name="viewport" content="width=device-width, height=541 initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

The gap is gone. But, I don't think this will a good idea because on orientation change the footer is lost, as height remains 541. I don't want to hard-code the height anywhere, since multiple devices might have different height.
It seems the view-port height is not correctly set for css. I am using bottom:0; position:absolute; to fix the footer. I have tried position:fixed too.
Here is the reference link: WP8 Scroll Demo
Please help.

A:

Use iscroll4 and use few media queries in css:
@media screen and (orientation: portrait) {
  @-ms-viewport {
    width: 320px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
  }
}

@media screen and (orientation: landscape) {
  @-ms-viewport {
    width: 480px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
  }
}

This works fine on Windows Mobile 8 Phones. Here is a demo: http://jqtouch.rediffmailpro.com/iScroll/win8Example.html

