WP7 - 如何使用 javascript 在 webbrowser 中垂直居中 div

Question

我在 WP7 论坛上试过这个，但一无所获...

我正在生成一个相当简单的 html 文档，它的所有内容都在一个 div 中。我需要在 webbrowser 控件中垂直居中该 div。带有“display：table”的外部 div 和带有“display：table-cell”的内部 div 的通常方法在 WP7-IE 中不起作用，所以我使用了 javascript。这个非常简单的 js 函数可以在桌面浏览器上运行：

    function setContent() {
        var windowHeight = document.documentElement.clientHeight;
        if (windowHeight > 0) {
            var contentElement = document.getElementsByClassName('DivToCenter')[0];
            var contentHeight = contentElement.offsetHeight;

            if (windowHeight - contentHeight > 0) {
                contentElement.style.position = 'relative';
                contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                window.external.Notify('' + ((windowHeight / 2) - (contentHeight / 2)));
            }
            else {
                contentElement.style.position = 'static';
            }
        }
    }
    window.onload = function() {
        setContent();
    }
    window.onresize = function() {
        setContent();
    }

这个函数的结果是 div 在 webbrowser 控件中显得太低了，好像视口的高度比它实际的高度更大。我从 javascript 中提取了视口的大小，并注意到它与 WebBrowser.ActualHeight 属性相同。所以，我现在的工作假设是报告给 javascript 的视口大小以 xaml 逻辑像素为单位，这会弄乱算法。这是我对正在发生的事情的最佳理论。

Answer 1

您可能应该看看这样的帖子：http://blogs.msdn.com/b/iemobile/archive/2011/01/21/managing-the-browser-viewport-in-windows-phone-7.aspx，其中讨论了 WP7 中的视口大小。