Правильный автоскейл блока с потоками

2025-03-15 01:07 Другое

При использовании автоскейла стандартных блоков Тильды может возникнуть ситуация, когда при открытии статьи popup потока тоже масштабируется — из-за этого текст и изображения становятся чрезмерно большими, что мешает комфортному чтению. Вот способ, как это исправить.

1. Добавляем блок T123 и прописываем в него код ниже.

2. В строку "var blockIds = ['#rec963209421']; // массив идентификаторов блоков"
Прописываем rec id своих блоков, которые будем автоскейлить.
Если их несколько то в формате: ['#rec963209421', '#rec963209421']

<!--автоскейл божественное вмешательство-->
<script>
$(document).ready(function() {
    var blockIds = ['#rec963209421']; // массив идентификаторов блоков
    adjustScreenZoom(blockIds);
    $(window).resize(function() {
        adjustScreenZoom(blockIds);
    });
});

function adjustScreenZoom(blockIds) {
    var screenWidth = $(window).width();
    var zoomLevel;

    if (screenWidth < 320) {
        zoomLevel = screenWidth / 320;
    } else if (screenWidth < 480) {
        zoomLevel = screenWidth / 480;
    } else if (screenWidth < 768) {
        zoomLevel = screenWidth / 768;
    } else {
        zoomLevel = screenWidth / 1200;
    }

    // Применяем уровень зума ко всем указанным блокам
    blockIds.forEach(function(blockId) {
        $(blockId).css('zoom', zoomLevel);
    });
}
</script>

3. Если необходимо добавить отступы по краям от блока - увеличиваем значение screenWidth / 1200
например до 1280.

Далее мы сталкиваемся с проблемой, что наши потоки, открывающиеся в попапе, тоже автоскейлятся в ПК версиях, а нам этого не надо, т.к. буквы становятся на пол экрана. Поэтому мы должны сделать "анзум" попап-потоков на ПК версиях.

4. Так же в блок T123 добавляем код ниже:

<style>
@media screen and (min-width: 1024px) {
.t-feed__post-popup.t-popup.t-popup_show {zoom: 0.5}}
</style>

5. Вроде всё! :)