windows phone 8中固定的jquery移动位置和视窗高度

Question

我有一个phonegap应用程序与jquery移动样式。我正在使用固定页脚进行导航。然而，页脚漂浮在离页面底部几个像素的上方。我相信这是因为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

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

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

从here到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
       }
    }
});

Answer 3

你必须改变视窗宽度的所有3个分辨率在windows phone 8中可用

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

在head部分中包含meta标记。

<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%。但是你需要找出这两个电话的最小宽度和最大宽度。