cordova - jQuery移动位置固定在Windows Phone 8和视口高度

Question

我有一个带有 jquery mobile 样式的 phonegap 应用程序。我正在使用固定页脚进行导航。然而，页脚从页面底部浮动几个像素。我相信这是因为 web 控件视口高度小于屏幕高度（在 WP8 上的实际网页中，这很好，因为页脚下方的空间被地址栏填充）。关于如何使视口高度等于屏幕高度的任何想法。

我不能使用 position:fixed 因为我需要在滚动内容时看到页脚。

截图：http: //imgur.com/ThHAx4k

Answer 1

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

Answer 2

您必须更改 windows phone 8 中所有 3 种分辨率的视口宽度

以下代码适用于 HTC windows phone 8x

在您的头部部分包含元标记。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

在您的头部部分包含以下样式

@media screen and (min-width: 640px) and (max-width: 1024px) and (orientation:portrait) {
    @-ms-viewport { width: 50%; }        
}

您需要为适用于 windows phone 8 的所有 3 种分辨率编写此内容。您可能必须为更高 DPI 手机减小宽度，为更低 DPI 手机增加宽度。

诺基亚 lumia 920 的视口宽度约为 70-80%，诺基亚 Lumia 820 的视口宽度约为 85-95%。但是您需要找出这两款手机的最小宽度和最大宽度。

Answer 3

您可以使用它来获取窗口高度

function getDeviceDimention() {
    console.log("Device Dimention using PhoneGap");
    console.log("Width = " + window.innerWidth);
    console.log("Height = " + window.innerHeight);
}

从这里到 K_Anas 的学分

您可以使用它为您的内容容器提供适当的高度。但是你必须倾听方向变化并改变高度。

$(window).on('orientationchange', function(e) {
        if(e.orientation == 'portrait') {
           //window height is your height
        }   
        else if(e.orientation == 'landscape') {
          //window width is your height
       }
    }
});