WP7 - Как вертикально центрировать div внутри веб-браузера с помощью JavaScript - PullRequest
1 голос
/ 22 марта 2011

Я попробовал это на форумах 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 кажется слишком низким в элементе управления веб-браузера, как если бы область просмотра имела большую высоту, чем она есть на самом деле. Я вытащил размер окна просмотра из javascript и заметил, что он идентичен свойству WebBrowser.ActualHeight. Итак, моя рабочая гипотеза сейчас заключается в том, что размер области просмотра, сообщаемой javascript, выражается в логических пикселях xaml, что портит арифметику. Это моя лучшая теория о том, что происходит.

1 Ответ

1 голос
/ 22 марта 2011

Вам, вероятно, следует взглянуть на пост, подобный этому: http://blogs.msdn.com/b/iemobile/archive/2011/01/21/managing-the-browser-viewport-in-windows-phone-7.aspx,, в котором обсуждается размер области просмотра в WP7.

...