Как Scribd реализует масштабирование?

Question

Функция масштабирования Scribd очень впечатляет. Все содержимое страницы, включая изображения и текст, пропорционально увеличивается при нажатии на кнопки + и -.

Например, попробуйте на http://www.scribd.com/html5.

Как они это делают? Похоже, это не так просто, как управлять масштабированием браузера (хотя управлять самим масштабированием браузера не просто, если вообще невозможно!)

С этим связан вопрос, как они реализуют свой «полноэкранный режим». Этот вопрос был задан ранее , но это было два года назад, когда они все еще использовали Flash.

Answer 1

Я бы предположил, что это может быть простое преобразование элемента canvas , но, глядя на их источник, это не так.

Вместо этого, похоже, что функция «Увеличение» влияет только на теги img на странице, поэтому я бы сказал, что, вероятно, они просто динамически изменяют атрибуты width и height дляэти теги.Это не очень сложный подход, и, конечно, он не зависит от того, что было введено в HTML5.

Редактировать:

Инструменты разработчика Chrome превосходны.Если вы наблюдаете DOM между масштабами, легко определить, как реализуется эффект.Вот как выглядит разметка в состоянии страницы по умолчанию:

<div class="outer_page only_ie6_border" id="outer_page_1" 
     style="width: 516.8000000000015px; height: 400px; ">
      <div class="newpage" id="page1" 
           style="width: 902px; height: 697px; 
                 -webkit-transform: scale(0.5729490022172966); 
                 -webkit-transform-origin-x: 0%; 
                 -webkit-transform-origin-y: 0%; ">
      ...
</div>
</div>

... и после однократного уменьшения:

 <div class="outer_page only_ie6_border" id="outer_page_1" 
     style="width: 646.0000000000018px; height: 500px; ">
      <div class="newpage" id="page1" 
           style="width: 902px; height: 697px; 
                 -webkit-transform: scale(0.7161862527716206); 
                 -webkit-transform-origin-x: 0%; 
                 -webkit-transform-origin-y: 0%; ">
      ...
</div>
</div>

... и после уменьшения снова:

<div class="outer_page only_ie6_border" id="outer_page_1" 
     style="width: 807.5000000000023px; height: 624px; ">
      <div class="newpage" id="page1" 
           style="width: 902px; height: 697px; 
                 -webkit-transform: scale(0.8952328159645258); 
                 -webkit-transform-origin-x: 0%; 
                 -webkit-transform-origin-y: 0%; ">
      ...
</div>
</div>

Похоже, что они реализовали эффект масштабирования, выполнив две вещи:

1. Увеличение width и height элемента контейнера.
2. Использование свойства webkit-transform CSS для масштабирования содержимого по мере необходимости.