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

【问题标题】：jquery mobile position fixed in windows phone 8 and viewport heightjQuery移动位置固定在Windows Phone 8和视口高度
【发布时间】：2013-05-12 05:46:31
【问题描述】：

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

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

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

【问题讨论】：

标签： cordova jquery-mobile windows-phone-8

【解决方案1】：

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

【讨论】：

在我的手机上效果很好，但这适用于所有可用的分辨率吗？
对我来说效果很好，但我将其更改为包含 height:534px;或者我还有一个小差距。下一个问题是允许 UL 滚动但不移动页眉或页脚，因为 WebUIBounce 技巧似乎不适用于 IE10。
@darkphantum，非常感谢哥们...很久以来一直在寻找解决方案..！

【解决方案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
       }
    }
});

【讨论】：

【解决方案3】：

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

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

在您的 head 部分中包含元标记。

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

【讨论】：