 | OldPageZoom 1.0 старый сайт на весь экран |
| OldPageZoom 1.0 старый сайт на весь экран |
Библиотека растягивает старый сайт, свёрстанный под фиксированный маленький экран (640x480, 800x600), на всё окно браузера с сохранением пропорций. Так ведёт себя игра в полноэкранном режиме. Посетителю не нужно ничего увеличивать вручную, и работает это даже в браузерах, где масштабирования нет вообще.
Содержание: Как это работает | Требования к странице | Параметры | Методы | Примеры | Ctrl+ и Ctrl- | Ограничения режима dom
Быстрый старт - на странице «Как подключить», таблица браузеров - «Браузеры», проблемы и решения - «Вопросы». Эта же документация есть в архиве: файл docs/index.html.
У библиотеки два способа масштабирования. Нужный выбирается автоматически (параметр 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.
wrapper).body находятся снаружи контейнера и не масштабируются.start() сам ждёт window.onload, чтобы картинки без
размеров успели загрузиться. Если у всех картинок есть width и height, можно вызвать
init() сразу в конце страницы: так масштаб применится раньше.style="...". Проценты не
трогаются: они и так растягиваются вместе с родителем.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": по высоте. |
scale | 0 | Фиксированный масштаб вместо подгонки, например 1.5. 0: подгонять под окно. |
baseWidth, baseHeight | 0 | Размер, от которого считается масштаб. 0: измерить сайт.
Можно указать расчётный экран: 640 и 480. |
minScale | 1 | Нижний предел. 1: никогда не уменьшать. 0: разрешить уменьшение в маленьких окнах. |
maxScale | 0 | Верхний предел. 0: без предела. |
step | 0 | Округлять масштаб вниз до кратного числа. 1: только 1x, 2x, 3x
(пиксельная графика остаётся ровной). 0.25: 1, 1.25, 1.5 и так далее. |
autoResize | true | Подстраиваться при изменении окна. false: подогнать один раз при загрузке. |
resizeDelay | 100 | Пауза в мс после изменения окна, чтобы не пересчитывать на каждый пиксель. |
align | "left" | Положение по горизонтали, когда сайт уже окна: "left", "center", "right". |
valign | "top" | "middle": центрировать по вертикали. |
scaleFonts | true | Масштабировать текст (режим dom). |
scaleImages | true | Масштабировать картинки без атрибутов размера (режим dom). |
scaleBackgrounds | true | Масштабировать фон ячеек (режим dom). |
scaleSpacing | true | Масштабировать cellpadding, cellspacing, hspace, vspace, border (режим dom). |
lineHeight | false | Масштабировать межстрочный интервал в px. Включайте, если в стилях сайта задан
line-height в пикселях. |
onScale | null | Функция, которая вызывается после каждого изменения масштаба: 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.
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) + "%";
}
});
При 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():
они работают во всех поддерживаемых браузерах, даже где зума нет.
В IE (режим zoom) этих ограничений нет: там увеличивается всё.
<style> и внешних .css не масштабируются.
Библиотека рассчитана на табличную вёрстку. Сайты на слоях с position: absolute
из таблицы стилей будут масштабироваться неправильно. Шрифты из таблиц стилей масштабируются.TD и TH: из атрибута background или из
style="background-image: url(...)". Фон body и table не масштабируется.
Плитка всегда начинается от левого верхнего угла, background-position не учитывается.td.firstChild), увидят другую структуру. iframe внутри такой ячейки перезагрузится.iframe или фрейма отдельная: подключайте библиотеку в неё саму.marquee не масштабируется.step: 1.