Как программно определить, какую площадь займет блок в браузере?

У меня есть код исходный страницы (а так же стили и скрипты). Как программно определить, сколько места (например, 200x300 px) определенный элемент (скажем, конкретный div) будет занимать в браузере у пользователя? (допустим, что браузер, разрешение экрана и пр. известно)


Есть ли готовые алгоритмы? Подскажите, в какую сторону копать: не представляю, как это даже приблизительно можно реализовать.
  • Вопрос задан
  • 3152 просмотра
Решения вопроса 1
sHinE
@sHinE
веб-разработчик, php/js/mysql и сопутствующее
Это конечно совсем через замочную скважину — но на сервере можно запускать браузер и в нем открывать страничку с данными (Sahi, Selenium) и получать размер блока оттуда. Знаю еще есть wkhtml2pdf — это для генерации pdf из html на сервере — он движок webkit юзает — так что есть какой-то способ с ним взаимодействовать.
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
Бо большому счету никак: только у пользователя отрендерить и жаваскриптом опросить. Даже если взять какой-то конкретный браузер, то могут быть разные шрифты установлены, разные размеры базового шрифта в настройках. Не говоря уже о «мелочах» вроде погрешности различных режимов сглаживания. Например в cleartype может «набежать» несколько лишних пикселей в строке, перенесется слово, и дальше уже высота блока сильно вырастет.
Ответ написан
@Next_Alex
Можешь попробовать покопать в сторону jQuery. А именно, с его помощью сделать перебор всех элементов страницы ( или как там тебе нужно ) с выводом необходимой тебе информации. Ну а дальше протестировать на нескольких клиентах для сбора статистики.
Например как-то так можно узнать размеры конкретного элемента на уже загруженной странице:
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
    function Start(){
        var h = $('#test').height();
        var w = $('#test').width();
        $('#result').append( 'height = ' + h + 'px, width = ' + w + 'px, square = ' + (w*h) + '<br/>');
        //outer dimentions - including margin, border and padding
        var oh = $('#test').outerHeight();
        var ow = $('#test').outerWidth();
        $('#result').append( 'outerHeight = ' + oh + 'px, outerWidth = ' + ow + 'px, fullSquare = ' + (ow*oh) );
    }
</script>
</head>
<body id="body" onload="Start();">
<div id="test">test</div>
<div id="result"></div>
</body>
</html>
Ответ написан
Комментировать
butteff
@butteff
Раз в тысячу лет заправляю свитер в носки
А что если делать сайт статическим, а не резиновым? Но с помощью джейкуэри для разного разрешения экрана подгружать свою таблицу стилей? Таким образом можно быть уверенным, что ничего не поползет, сайт тянется вроде как, все довольны. Нет?

Или зачем это нужно тогда?
Ответ написан
ertaquo
@ertaquo
Как вариант, можно распарсить html с css и получить размер путем сложения padding и width/height.
Ответ написан
Homakov
@Homakov
.getBoundingClientRect
Ответ написан
Комментировать
nalomenko
@nalomenko
Руководитель отдела разработок в студии «Lava»
Я, конечно, мог не совсем правильно понять вопрос, но что мешает открыть страницу в Firefox и посмотреть метрику элемента через Firebug?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы