Модификация сокращает время на вёрстку — добавляет автоскейл с уменьшением, масштабирование страницы по своим брейкпоинтам и позволяет масштабировать стандартные блоки.
Как работает модификация
Расширенный автоскейл
Модификация дополняет стандартный автоскейл Тильды, передавая в него свой коэффициент масштабирования на основе заданных параметров.
Коэффициент масштабирования рассчитывается для каждого Zero-блока по формуле: ширина экрана / базовый брейкпоинт, где базовый брейкпоинт — это ширина экрана, относительно которой выполняется масштабирование. Последнее вычисленное значение коэффициента модификация записывает в css-переменную --scale-factor.
Полученный коэффициент применяется к блокам двумя способами:
- Zero-блоки масштабируются штатным автоскейлом Тильды с учетом нового коэффициента
- Стандартные блоки наследуют коэффициент масштабирования через глобальную переменную --scale-factor и подставляют её в блок через css-свойство zoom
Поэтому масштаб стандартных блоков всегда совпадает с масштабом Zero-блоков.
Если у блока выключен автоскейл, его коэффициент принимается за единицу. При масштабировании всей страницы это важно учитывать: чтобы страница скейлилась целиком, автоскейл должен быть включён у всех блоков.
Модификация также позволяет задать горизонтальный отступ по краям страницы: его величина вычитается из ширины области масштабирования, поэтому слева и справа при любом масштабировании останется постоянный отступ.
Подробнее: Расширенный автоскейл Zero-блоков
Масштабирование стандартных блоков
Стандартные блоки масштабируются на основе коэффициента масштабирования последнего Zero-блока, который подтягивается через css-переменную --scale-factor.
Подробнее: Масштабирование стандартных блоков
Отключение автоскейла для устройств
Модификация позволяет задавать свои условия для работы автоскейла и отключать масштабирование для конкретных браузеров или ОС, если масштабирование работает некорректно.
Устанавливает атрибут [data-artboard-upscale="grid"] для всех Zero-блоков и сбрасывает коэффициент масштабирования до 1.
Подробнее: Отключение автоскейла для устройств
Начало работы
Установка библиотеки
Для работы расширенного автоскейла необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.6/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>Пример: Переопределение брейкпоинтов
Масштабирование в обратную сторону
С помощью параметра direction: "downscale" можно уменьшить вёрстку старшего брейкпоинта под экраны с меньшей шириной. Например, вместо отдельной планшетной версии показать уменьшенную компьютерную:
<script>rescale.init({ min: 480, max: 1200, direction: "downscale" })</script>Для корректной работы масштабирования вёрстка на меньшем брейкпоинте должна совпадать с вёрсткой на большем. Так, в примере выше, на экранах 480–1200px она должна быть такой же, как и на 1200px–max. Повторять её вручную не обязательно — настройки на меньшем брейкпоинте можно сбросить, чтобы они автоматически унаследовались от большего.
Это необходимо потому, что модификация влияет только на коэффициент масштабирования, а все остальные настройки продолжают работать относительно меньшего брейкпоинта (так, настройки, заданные на ширине 480px, будут применяться на всех экранах от 480px до следующего брейкпоинта).
Пример: Обратное масштабирование
Удержание масштабирования
На больших экранах масштабирование можно ограничить, чтобы контент не растягивался бесконечно. Для этого вместо максимального брейкпоинта нужно задать параметр keep — ширину экрана, после которой коэффициент масштабирования перестанет расти:
<script>rescale.init({ min: 1440, keep: 1920, direction: "upscale" })</script>В данном примере страница масштабируется с 1440px до 1920px, а на экранах шире остаётся такой же, как при 1920px, выравнивая содержимое по центру.
Пример: Удержание масштабирования
Постоянный отступ при масштабировании
Чтобы при масштабировании по краям страницы оставался постоянный отступ, в настройках модификации можно дополнительно указать параметр padding. Он резервирует расстояние слева и справа, которое не меняется вместе с масштабом:
<script>rescale.init({ min: 480, max: 1440, direction: "downscale", padding: 40 })</script>Такой отступ помогает выровнять вёрстку стандартных и Zero-блоков между собой или задать одинаковый отступ для всей страницы.
Масштабирование стандартных блоков
Применить автоскейл к стандартным блокам можно с помощью функции rescale.block():
<script>rescale.block("#rec00000000")</script>
<script>rescale.block(".uc-class")</script> <!-- то же самое, только по классу -->Если масштабирование необходимо применить сразу к нескольким блокам, их можно перечислить через запятую:
<script>rescale.block("#rec10000001, #rec10000002, #rec10000003")</script>Для корректной работы модификации убедитесь, что на странице есть хотя бы один Zero-блок с автоскейлом, чтобы настройки масштабирования подтянулись оттуда.
Отключение автоскейла для устройств
Если на некоторых устройствах или браузерах автоскейл работает некорректно, его можно отключить, указав в параметрах соответствующие ОС os и браузеры browsers:
<script>rescale.disable({ os: "ios", browsers: "telegram, instagram" })</script>Данный скрипт отключает автоскейл для встроенных браузеров на iOS.
Распространенные проблемы
Блоки некорректно скейлятся на промежуточных экранах
Распространённая проблема, которая может возникать по нескольким причинам:
На указанных брейкпоинтах заданы свои настройки
При обратном масштабировании за основу берётся максимальный брейкпоинт, поэтому для корректного отображения важно, чтобы вёрстка планшетной версии была такой же, как и у компьютерной.
При обратном масштабировании за основу берётся максимальный брейкпоинт, поэтому для корректного отображения важно, чтобы вёрстка планшетной версии была такой же, как и у компьютерной.
Стандартные блоки имеют свою вёрстку для планшетов
В некоторых случаях стандартные блоки имеют свои стили для определенной ширины экрана, которые накладываются на масштабирование автоскейлом и могут отображаться некорректно. В таком случае их стили необходимо сбросить через CSS.
В некоторых случаях стандартные блоки имеют свои стили для определенной ширины экрана, которые накладываются на масштабирование автоскейлом и могут отображаться некорректно. В таком случае их стили необходимо сбросить через CSS.
Некорректно скейлятся стандартные блоки
Такая проблема может возникать из-за особенностей вёрстки – у некоторых блоков она устроена так, что при изменении размеров колонок/карточек хотя бы на один пиксель, они переносятся на следующий ряд, и общая сетка сбивается.
Решить данную проблему можно с помощью CSS, уменьшив максимальную ширину карточек max-width или увеличив ширину общего контейнера на несколько пикселей.
Решить данную проблему можно с помощью CSS, уменьшив максимальную ширину карточек max-width или увеличив ширину общего контейнера на несколько пикселей.
Кроме того, если масштабирование не применяется к конкретному блоку, проверьте, что на странице нет одновременного вызова rescale.init и rescale.block — расширенный автоскейл уже включает масштабирование стандартных блоков на всей странице, поэтому дополнительный вызов rescale.block для того же блока вызовет конфликт.
Масштабирование не применяется вообще
У данной проблемы есть две возможные причины:
На странице отсутствуют Zero-блоки с автоскейлом
Расширенный автоскейл дополняет стандартную функцию Тильды, поэтому для его корректной работы важно, чтобы на странице присутствовали блоки со включенным масштабированием.
Расширенный автоскейл дополняет стандартную функцию Тильды, поэтому для его корректной работы важно, чтобы на странице присутствовали блоки со включенным масштабированием.
У последнего Zero-блока выключен автоскейл
В качестве глобального коэффициента масштабирования принимается значение последнего Zero-блока на странице – если у него выключен автоскейл, результат будет равняться единице. Для решения проблемы убедитесь, что у последнего блока применяется масштабирование.
В качестве глобального коэффициента масштабирования принимается значение последнего Zero-блока на странице – если у него выключен автоскейл, результат будет равняться единице. Для решения проблемы убедитесь, что у последнего блока применяется масштабирование.
Нужно исключить отдельные блоки из масштабирования
По умолчанию модификация масштабирует все блоки на странице. Чтобы отключить автоскейл для отдельного блока, укажите его через псевдо-класс :not() при запуске модификации:
<script>rescale.init(".t-rec:not(#rec00000000)", { min: 320, max: 480 })</script>Аналогичным образом блок можно исключить по классу — .t-rec:not(.uc-class).
При загрузке происходит скачок масштабирования
Во время загрузки страница сначала отрисовывается в исходном виде и только потом масштабируется — модификация загружается с CDN и применяется не мгновенно, поэтому в первый момент возможен скачок.
Скрыть его поможет блок плавной загрузки T228: он отобразит содержимое страницы только после её загрузки.
Возникает конфликт с другими модами
Расширенный автоскейл совместим со всеми модификациями из исходной библиотеки и модификациями других авторов, использующих стандартный автоскейл.
Сторонний код, переопределяющий стандартные функции масштабирования и событий запуска, с автоскейлом несовместим.
Если модификация все равно не работает
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой.
