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

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

我无法使用position：fixed，因为我需要页脚在滚动内容时可见。

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

来源

2013-05-17 darkphantum

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

来源

2013-05-17 23:41:08 darkphantum

在我的手机上很好用，但是这对所有可用的分辨率都可以吗？ – Michielvv

它可以在模拟器和lumia上正常工作920 – darkphantum

适合我，但是我将它改为包括height：534px;或者我仍然有一个小差距。接下来的问题是允许UL滚动，但不能移动页眉或页脚，因为WebUIBounce技巧似乎不适用于IE10。 – GilesDMiddleton

您可以用它来从here

得到窗口的高度

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 
     } 
    } 
});

来源

2013-05-17 06:36:10 alkis

谢谢。我能用css完成 – darkphantum

你必须改变视口宽度提供的Windows Phone 8

下面的代码全部3项决议，将为HTC的Windows Phone合作8X

包括在你的头部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手机8.所有3分辨率您可能必须降低幅度更高的DPI电话和增加宽度较小的DPI电话。

诺基亚lumia 920的视口宽度将在70-80％左右，诺基亚Lumia 820的视口宽度将在85-95％左右。但是你需要找出这两款手机的最小宽度和最大宽度。

来源

2013-06-27 16:39:08

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

回答

相关问题