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

Question

我在我的一个 HTML5 网络应用程序中使用了固定页脚。它在 IE10 手机浏览器上运行良好，但是当我使用 web-view 在 WP8 Emulator 上试用它时

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 正确设置视口(viewport)高度。我正在使用底部:0；position:absolute；修复页脚。我也尝试过 position:fixed 。

这是引用链接: 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