WP7 - 如何使用 javascript 在网络浏览器内垂直居中 div

Question

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

我正在生成一个相当简单的 html 文档，其所有内容都在一个 div 中。我需要将该 div 在网络浏览器控件中垂直居中。通常的方法是外部 div 带有“display: table”，内部 div 带有“display: table-cell”，这在 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 在 Web 浏览器控件中显得太低，就好像视口的高度比实际高度更高。我从 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中的视口大小。