Fixed footer bug in WP8 Emulator

Question

I used a fixed footer in one of my HTML5 web applications. It works fine in IE10 browser browser, but when I try to use it in WP8 Emulator using web view

mainBrowser.Navigate(new URi("http://jqtouch.rediffmailpro.com/iScroll/win8Example1.html",URiKind.Absolute)); 

He leaves a gap below.

I read it somewhere and edited the meta tag to include 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 it would be a good idea, because when you change the orientation, the footer is lost, because the height remains 541. I don’t want to record the height anywhere, since several devices can have different heights.

Looks like the height of views-port is incorrectly set for css. I use bottom: 0; position: absolute; to fix the footer. I tried position: fixed too.

Here is the link: WP8 Scroll Demo

Please, help.

Answer 1

Use iscroll4 and use some 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