修复了WP8模拟器上的页脚问题

Question

我在一个HTML5网络应用程序中使用了一个固定的页脚.它在IE10手机浏览器上工作正常,但是当我在WP8模拟器上使用网络视图试用它时

mainBrowser.Navigate(new URi("http://jqtouch.rediffmailpro.com/iScroll/win8Example1.html",URiKind.Absolute));

它在底部留下了一个空隙.

我在某处读了它,并编辑了元标记以包含高度.

<meta name="viewport" content="width=device-width, height=541 initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

差距消失了.但是,我认为这不是一个好主意,因为在方向改变时,页脚会丢失,因为高度仍然是541.我不想在任何地方硬编码高度,因为多个设备可能有不同的高度.

似乎没有为css正确设置视口高度.我使用的是底部:0; 位置:绝对的; 修复页脚.我试过了位置:固定了.

以下是参考链接:WP8 Scroll Demo

请帮忙.

Answer 1

使用 iscroll4 并在 css 中使用少量媒体查询：

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

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

这在 Windows Mobile 8 手机上运行良好。这是一个演示：http://jqtouch.rediffmailpro.com/iScroll/win8Example.html