OldPageZoom 1.0

Библиотека растягивает старый сайт, свёрстанный под фиксированный маленький экран (640x480, 800x600), на всё окно браузера с сохранением пропорций. Так ведёт себя игра в полноэкранном режиме. Посетителю не нужно ничего увеличивать вручную, и работает это даже в браузерах, где масштабирования нет вообще.

Содержание: Быстрый старт | Как это работает | Требования к странице | Параметры | Методы | Примеры | Ctrl+ и Ctrl- | Браузеры | Ограничения | Проблемы и решения

Быстрый старт

1. Положите OldPageZoom.js на сайт.

2. Оберните всё содержимое страницы в один div с id и уберите отступы у body:

<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div id="wrapper">
   ... весь сайт ...
</div>

3. Перед </BODY> подключите скрипт:

<script type="text/javascript" src="OldPageZoom.js"></script>
<script type="text/javascript">
OldPageZoom.start({ root: "wrapper" });
</script>

Больше ничего не нужно. Сайт будет увеличиваться, только когда окно больше сайта. Уменьшения не будет, а при изменении размера окна масштаб подстроится заново. Путь в src считается от страницы, а не от шаблона: для страниц во вложенных папках пишите ../OldPageZoom.js.

Как это работает

У библиотеки два способа масштабирования. Нужный выбирается автоматически (параметр mode).

zoom: Internet Explorer 5.5-11. Используется встроенное в IE свойство zoom: весь блок увеличивается целиком, как картинка. Это быстро и точно.

dom: все остальные браузеры (Netscape 6/7, Mozilla, Firefox, Opera, Safari, Chrome). Страница пересчитывается вручную:

  • размер шрифта каждого элемента переводится в пиксели и умножается на масштаб;
  • атрибуты width и height у картинок, таблиц и ячеек умножаются на масштаб;
  • размеры в пикселях из атрибута style (style="width: 389px") тоже умножаются;
  • умножаются отступы cellpadding, cellspacing, hspace, vspace, border;
  • картинкам без атрибутов размера ставится их реальный размер, умноженный на масштаб;
  • фон ячейки (background="...") заменяется настоящими картинками <img>, уложенными плиткой. Старые браузеры не умеют масштабировать CSS-фон, а картинки умеют.

Размеры считаются от краёв, а не по отдельности, поэтому между кусками нарезки (ImageReady, Fireworks) не появляется щелей в 1px.

Требования к странице

  1. Один общий контейнер. Всё, что нужно масштабировать, лежит внутри одного элемента с id (по умолчанию wrapper).
  2. Нулевые отступы body. Отступы body находятся снаружи контейнера и не масштабируются.
  3. Запуск после загрузки. start() сам ждёт window.onload, чтобы картинки без размеров успели загрузиться. Если у всех картинок есть width и height, можно вызвать init() сразу в конце страницы: так масштаб применится раньше.
  4. Размеры в пикселях. Масштабируются числа в атрибутах и в style="...". Проценты не трогаются: они и так растягиваются вместе с родителем.
  5. Если у страницы есть onload или onresize, они сохраняются: библиотека вызывает их перед своим кодом.

Параметры

Передаются объектом в start() или init(). Все необязательны.

ПараметрПо умолчаниюЧто делает
root"wrapper"id контейнера страницы (или сам элемент).
mode"auto""auto": zoom в IE, dom в остальных. "zoom": всегда встроенный zoom (IE, современные Chrome и Firefox 126+). "dom": всегда ручной пересчёт, в том числе в IE.
fit"both""both": сайт целиком влезает в окно по ширине и высоте (как игра на весь экран). "width": по ширине окна, высота может уйти в прокрутку. "height": по высоте.
scale0Фиксированный масштаб вместо подгонки, например 1.5. 0: подгонять под окно.
baseWidth, baseHeight0Размер, от которого считается масштаб. 0: измерить сайт. Можно указать расчётный экран: 640 и 480.
minScale1Нижний предел. 1: никогда не уменьшать. 0: разрешить уменьшение в маленьких окнах.
maxScale0Верхний предел. 0: без предела.
step0Округлять масштаб вниз до кратного числа. 1: только 1x, 2x, 3x (пиксельная графика остаётся ровной). 0.25: 1, 1.25, 1.5 и так далее.
autoResizetrueПодстраиваться при изменении окна. false: подогнать один раз при загрузке.
resizeDelay100Пауза в мс после изменения окна, чтобы не пересчитывать на каждый пиксель.
align"left"Положение по горизонтали, когда сайт уже окна: "left", "center", "right".
valign"top""middle": центрировать по вертикали.
scaleFontstrueМасштабировать текст (режим dom).
scaleImagestrueМасштабировать картинки без атрибутов размера (режим dom).
scaleBackgroundstrueМасштабировать фон ячеек (режим dom).
scaleSpacingtrueМасштабировать cellpadding, cellspacing, hspace, vspace, border (режим dom).
lineHeightfalseМасштабировать межстрочный интервал в px. Включайте, если в стилях сайта задан line-height в пикселях.
onScalenullФункция, которая вызывается после каждого изменения масштаба: function (scale) {}.

Методы

МетодЧто делает
OldPageZoom.start(options)Запустить после загрузки страницы. Обычный способ.
OldPageZoom.init(options)Запустить сразу. Возвращает true или false, если браузер не поддерживается или контейнер не найден. Повторный вызов ничего не делает.
OldPageZoom.setScale(n)Поставить масштаб вручную (1 = исходный размер). После этого окно не отслеживается до вызова fit().
OldPageZoom.zoomIn(k)Увеличить в k раз (по умолчанию 1.1).
OldPageZoom.zoomOut(k)Уменьшить в k раз (по умолчанию 1.1).
OldPageZoom.fit()Вернуться к подгонке под окно.
OldPageZoom.getScale()Текущий масштаб.
OldPageZoom.supported()Умеет ли браузер работать с библиотекой.

Примеры

Подогнать один раз и больше не трогать

OldPageZoom.start({ root: "wrapper", autoResize: false });

Сайт подгоняется под окно при загрузке, дальше размер не меняется. Ctrl+ и Ctrl- работают как обычно.

По центру экрана, как игра

OldPageZoom.start({ root: "wrapper", align: "center", valign: "middle" });

Только целые увеличения (ровные пиксели)

OldPageZoom.start({ root: "wrapper", step: 1 });

Сайт 640x480 в окне 1280x960 и больше станет ровно вдвое крупнее. В окне меньше этого размера останется 1x.

Считать от экрана 640x480, а не от размера сайта

OldPageZoom.start({ root: "wrapper", baseWidth: 640, baseHeight: 480 });

Свои кнопки масштаба

<a href="javascript:OldPageZoom.zoomOut()">меньше</a>
<a href="javascript:OldPageZoom.zoomIn()">больше</a>
<a href="javascript:OldPageZoom.fit()">по окну</a>

Показать текущий масштаб

OldPageZoom.start({
    root: "wrapper",
    onScale: function (s) {
        document.getElementById("zoom").innerHTML = Math.round(s * 100) + "%";
    }
});

Ctrl+ и Ctrl-

При autoResize: true (по умолчанию) в браузерах, где Ctrl+ увеличивает страницу целиком (IE7+, Firefox 3+, Chrome, Safari, новые Opera), окно в пикселях страницы становится меньше. Библиотека видит это как изменение размера окна и снова подгоняет сайт под окно. В итоге сайт остаётся во весь экран, и Ctrl+ почти ничего не меняет.

В Firefox 1.x-2, Netscape 6/7 и Mozilla Ctrl+ увеличивает только текст. Текст растёт внутри ячеек так же, как и без библиотеки, и может вылезти за них. В IE5-6 пункт «Размер шрифта» действует на текст так же, как без библиотеки.

При autoResize: false сайт подгоняется один раз при загрузке, а дальше Ctrl+ и Ctrl- работают поверх как обычный зум браузера.

Для своих кнопок или клавиш используйте zoomIn(), zoomOut() и fit(): они работают во всех поддерживаемых браузерах, даже где зума нет.

Браузеры

БраузерРежимСостояние
Internet Explorer 6zoomпроверен на реальной странице
Internet Explorer 5.5, 7-11zoomдолжен работать, не проверялся
Internet Explorer 5.0domкод рассчитан на JScript 5.0, не проверялся
Netscape 7.0domпроверен на реальной странице
Netscape 6, Mozilla 0.9+domдолжен работать, не проверялся
Firefox 1.5domпроверен на реальной странице
Opera 9domпроверен на реальной странице
Opera 7-8, Safari, Konqueror 3domдолжен работать, не проверялся
Современные Chrome, Edgedomпроверен
Netscape 4, IE 4 и старше, Opera 6 и старше-не поддерживаются: в них нельзя изменить уже показанную страницу. Библиотека ничего не делает, сайт показывается как обычно.

Отметка «проверен на реальной странице» относится к табличному сайту из нарезки ImageReady с фонами ячеек. Сайт другого устройства проверяйте сами в нужных браузерах.

Ограничения режима dom

В IE (режим zoom) этих ограничений нет: там увеличивается всё.

  • Размеры, отступы и координаты в пикселях из <style> и внешних .css не масштабируются. Библиотека рассчитана на табличную вёрстку. Сайты на слоях с position: absolute из таблицы стилей будут масштабироваться неправильно. Шрифты из таблиц стилей масштабируются.
  • Фон масштабируется только у ячеек TD и TH: из атрибута background или из style="background-image: url(...)". Фон body и table не масштабируется. Плитка всегда начинается от левого верхнего угла, background-position не учитывается.
  • Содержимое ячейки с фоном переносится во внутреннюю таблицу. Скрипты, которые обращаются к детям такой ячейки по структуре (td.firstChild), увидят другую структуру. iframe внутри такой ячейки перезагрузится.
  • Содержимое, добавленное скриптом после запуска, не масштабируется.
  • Страница внутри iframe или фрейма отдельная: подключайте библиотеку в неё саму.
  • Скорость marquee не масштабируется.
  • Увеличенные картинки выглядят крупнее и размытее или «квадратнее», в зависимости от браузера. Для пиксельной графики используйте step: 1.

Проблемы и решения

Ничего не происходит

Проверьте, что файл загружается (путь считается от страницы) и что окно больше сайта: при minScale: 1 маленький сайт в маленьком окне не меняется. Проверка:

<script type="text/javascript">
window.setTimeout(function () {
    alert(typeof OldPageZoom == "undefined" ? "файл не загружен" :
          "масштаб: " + OldPageZoom.getScale());
}, 2000);
</script>

Таблица ломается, ячейка с картинкой-ссылкой выше нужного

Это ошибка вёрстки, она есть и без библиотеки. Если картинка обёрнута в <a> и перед </TD> стоит перенос строки, старые браузеры добавляют под картинкой отступ в несколько пикселей. Ставьте </TD> вплотную и выравнивайте картинку по низу:

<a href="..."><img src="..." width="468" height="60" border="0" style="vertical-align: bottom"></a></TD>

Атрибут width ячейки не совпадает с содержимым

Если в ячейке width="460", а внутри картинка шириной 468, браузеры по-разному решают этот спор. Исправьте атрибут на реальный размер.

Белые полосы между кусками нарезки в Netscape 7

Обычно это ячейка с фоном, которая выше нужного из-за ошибки вёрстки (см. выше). Чтобы найти такую ячейку, вставьте после запуска диагностику и сравните для каждой строки размер после стрелки и real:

<script type="text/javascript">
window.setTimeout(function () {
    var r = [], it, i, t;
    for (i = 0; i < OldPageZoom.items.length; i++) {
        it = OldPageZoom.items[i];
        if (it.w != null || it.h != null) {
            r[r.length] = it.el.tagName + " x=" + it.x + " y=" + it.y +
                " w=" + it.w + " h=" + it.h + " -> " +
                it.el.getAttribute("width") + "x" + it.el.getAttribute("height") +
                " real " + it.el.offsetWidth + "x" + it.el.offsetHeight;
        }
    }
    t = document.createElement("textarea");
    t.cols = 100; t.rows = 20;
    t.value = r.join("\n");
    document.body.appendChild(t);
}, 2000);
</script>

 

OldPageZoom 1.0