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

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

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

您必须更改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％。但是你需要找出这两款手机的最小宽度和最大宽度。

jquery移动位置固定在Windows Phone 8和视口高度

3 个答案: