windows phone 8 cordova viewport height issue

问题

we Developed a windows phone 8 app with cordova. Its working proerly but after the windows phone8 8.0.10328.78 release the footer is get disrub. I Checked into the code earlier i am getting the height of viewport as 768 and now its 800.

what will be solution here.

回答1:

I got the solution for this

In MainPage.xaml change

shell:SystemTray.IsVisible="True"

shell:SystemTray.IsVisible="False"

回答2:

I've recently run into this issue building a page to run within the WebView. The issue is the viewport height... Using "height=device-height" makes the viewport the entire screen height (less the app tray).

The fix I used was to declare an initial value in the height of 460, and then dynamically replace that value once the document has loaded. This technique works across all devices (that I've tested), including Windows, Android and iOS.

With the example below remember not to move the viewport meta tag from it's current position, the JS targets the second meta tag in the head, if you move it, you'll need to update the JS accordingly.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, height=460">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    ...
</head>

<body>
    ...
    <script>
        (function() {
            'use strict';

            var fixHeight = function() {
                var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
                var viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

                var viewportContent = 'initial-scale=1, user-scalable=no, width=device-width, height=' + viewportHeight;
                document.getElementsByTagName('META')[1].content = viewportContent;
            };

            window.addEventListener('load', fixHeight);
            window.addEventListener('resize', fixHeight);
         })();
    </script>
</body>

回答3:

Try to put this in your CSS:

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

来源：https://stackoverflow.com/questions/18494781/windows-phone-8-cordova-viewport-height-issue

标签

windows-phone-8

cordova

updates