none
Fixed footer issue on WP8 Emulator RRS feed

  • Question

  • 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; absolute position to fix the footer. I have tried fixed position.

    Please help.


    • Edited by Beekays Wednesday, December 5, 2012 11:53 AM HTML Junk
    Wednesday, December 5, 2012 11:51 AM

All replies

  • this code in header fixed the problem for me (on wp8):

        <script>
            (function () {
                if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
                    var msViewportStyle = document.createElement("style");
                    msViewportStyle.appendChild(
                        document.createTextNode("@-ms-viewport{width:auto!important; height:100vh;}")
                    );
                    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
                     
                }
            })();
        </script>

    Thursday, May 9, 2013 6:27 AM