Модификация сокращает время на вёрстку — добавляет автоскейл с уменьшением, масштабирование страницы по своим брейкпоинтам и позволяет масштабировать стандартные блоки.
Как работает модификация
Расширенный автоскейл Zero-блоков
Модификация расширяет стандартный автоскейл Тильды, передавая в него свой коэффициент масштабирования на основе заданных параметров и позволяет масштабировать стандартные блоки.
Масштабирование выполняется за счёт свойства zoom, которое рассчитывается по формуле: коэфф. масштабирования = ширина экрана / базовый брейкпоинт, где базовый брейкпоинт – это ширина экрана, относительно которой выполняется масштабирование. Модификация рассчитывает коэффициент масштабирования поочередно для каждого блока и записывает его последнее значение в css-переменную --scale-factor.
Масштабирование Zero-блоков выполняется стандартным автоскейлом Тильды, а стандартные блоки скейлятся с помощью css-переменной. Для блоков с выключенным автоскейлом коэффициент масштабирования принимается за единицу, поэтому при масштабировании всей страницы важно убедиться, что автоскейл включен для всех блоков.
Подробнее: Расширенный автоскейл Zero-блоков
Масштабирование стандартных блоков
Стандартные блоки масштабируются на основе коэффициента масштабирования последнего Zero-блока, который подтягивается через css-переменную --scale-factor.
Подробнее: Масштабирование стандартных блоков
Отключение автоскейла для устройств
Модификация позволяет задавать свои условия для работы автоскейла и отключать масштабирование для конкретных браузеров или ОС, если масштабирование работает некорректно.
Устанавливает атрибут [data-artboard-upscale="grid"] для всех Zero-блоков и сбрасывает коэффициент масштабирования до 1.
Подробнее: Отключение автоскейла для устройств
Начало работы
Установка библиотеки
Для работы расширенного автоскейла необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>Дальнейшая настройка производится по инструкции к каждому из вариантов:
Функции и параметры
Методы, с помощью которых можно управлять работой расширенного автоскейла. Подгружаются перед срабатыванием t_onReady() как функции объекта rescale.
В качестве аргументов для настройки автоскейла можно передавать следующие параметры:
События
После передачи кастомного коэффициента автоскейла в глобальные переменные, модификация вернёт событие rescaleinit. Его можно использовать для интеграций с другими модами или доработки стороннего кода.
Инициализация
Код инициализации автоскейла вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом:
<!--rescale.js Расширенный автоскейл. https://postnikovmd.com/mods/rescale-->
<script>rescale.init()</script>Примеры использования
Переопределение существующих брейкпоинтов
Для того, чтобы страница масштабировалась по другим брейкпоинтам, достаточно переопределить их в функции rescale.init:
<script>rescale.init({ min: 1280, max: 1440px, direction: "upscale" })</script>Данный код будет масштабировать брейкпоинт 1280px до того, пока ширина экрана не достигнет 1440px, даже если в Zero-блоках стоят другие значения:
Чтобы задать несколько кастомных брейкпоинтов, данные функции дублируются. Если максимальный брейкпоинт отсутствует, пропускаем его:
<script>rescale.init({ min: 360, max: 480, direction: "upscale" })</script>
<script>rescale.init({ min: 1280, max: 1440, direction: "upscale" })</script>
<script>rescale.init({ min: 1440, direction: "upscale" })</script>Обратное масштабирование для планшетов
Для применения обратного масштабирования необходимо подготовить Zero-блок таким образом, чтобы на необходимой ширине экрана вёрстка была такой же, как и на следующем брейкпоинте.
Так, для того, чтобы сделать обратное масштабирование для планшетов 480–1200px, их вёрстка должна совпадать с вёрсткой для компьютеров 1200px–max. В таком случае элементы будут выходить за пределы рабочей области, а их размеры и координаты совпадать со следующем брейкпоинтом.
Задаём обратное направление масштабирования через direction: "downscale":
<script>rescale.init({ min: 480, max: 1200, direction: "downscale" })</script>Удержание масштабирования на больших экранах
Автоскейл может смотреться громоздко на больших экранах, поэтому, чтобы ограничить область его масштабирования, вместо максимального брейкпоинта используется параметр keep. Он сохраняет коэффициент масштабирования постоянным при достижении определенной ширины экрана – контент страницы не растягиваться дальше, а выравнивается по центру, как при выключенном автоскейле.
<script>rescale.init({ min: 1440, keep: 1920, direction: "upscale" })</script>Масштабирование стандартных блоков
Стандартные блоки масштабируются одной строчкой кода, в которой указывается их ID или класс:
<script>rescale.block("#rec10000000")</script>Если необходимо применить масштабирование сразу к нескольким блокам, их можно перечислить через запятую: rescale.block("#rec10000001, #rec10000002, #rec10000003").
<script>rescale.block("#rec10000001, #rec10000002, #rec10000003")</script>При масштабировании стандартных блоков убедитесь, что на странице есть хотя бы один Zero-блок с автоскейлом, чтобы настройки масштабирования подтянулись оттуда.
Отключение автоскейла для встроенных браузеров
Если на некоторых устройствах или браузерах автоскейл работает некорректно, его можно отключить, указав в параметрах соответствующие ОС os и браузеры browsers:
<script>rescale.disable({ os: "ios", browsers: "telegram, instagram" })</script>Данный скрипт отключает автоскейл для встроенных браузеров на iOS.
Распространенные проблемы
Блоки некорректно скейлятся на планшетах
Распространённая проблема, которая может возникать по нескольким причинам:
На указанных брейкпоинтах заданы свои настройки
При обратном масштабировании за основу берётся максимальный брейкпоинт, поэтому для корректного отображения важно, чтобы вёрстка планшетной версии была такой же, как и у компьютерной.
При обратном масштабировании за основу берётся максимальный брейкпоинт, поэтому для корректного отображения важно, чтобы вёрстка планшетной версии была такой же, как и у компьютерной.
Стандартные блоки имеют свою вёрстку для планшетов
В некоторых случаях стандартные блоки имеют свои стили для определенной ширины экрана, которые накладываются на масштабирование автоскейлом и могут отображаться некорректно. В таком случае их стили необходимо сбросить через CSS.
В некоторых случаях стандартные блоки имеют свои стили для определенной ширины экрана, которые накладываются на масштабирование автоскейлом и могут отображаться некорректно. В таком случае их стили необходимо сбросить через CSS.
Масштабирование не применяется вообще
На странице отсутствуют Zero-блоки с автоскейлом
Расширенный автоскейл дополняет стандартную функцию Тильды, поэтому для его корректной работы важно, чтобы на странице присутствовали блоки со включенным масштабированием.
Расширенный автоскейл дополняет стандартную функцию Тильды, поэтому для его корректной работы важно, чтобы на странице присутствовали блоки со включенным масштабированием.
У последнего Zero-блока выключен автоскейл
В качестве глобального коэффициента масштабирования принимается значение последнего Zero-блока на странице – если у него выключен автоскейл, результат будет равняться единице. Для решения проблемы убедитесь, что у последнего блока применяется масштабирование.
В качестве глобального коэффициента масштабирования принимается значение последнего Zero-блока на странице – если у него выключен автоскейл, результат будет равняться единице. Для решения проблемы убедитесь, что у последнего блока применяется масштабирование.
Текст на планшетах становится слишком большим
Известная проблема, появляющаяся на старых планшетах Apple или при просмотре сайта в режиме разработчика с имитацией iPad. Зависит от стандартного автоскейла Тильды и решается обновлением ОС устройства или использованием адаптивного просмотра в инструментах разработчика.
Возникает конфликт с другими модами
Расширенный автоскейл совместим со всеми модификациями из исходной библиотеки и модификациями других авторов, использующих стандартный автоскейл.
Сторонний код, переопределяющий стандартные функции масштабирования и событий запуска, с автоскейлом несовместим.
Если модификация все равно не работает
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=rescale, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.