При использовании автоскейла стандартных блоков Тильды может возникнуть ситуация, когда при открытии статьи popup потока тоже масштабируется — из-за этого текст и изображения становятся чрезмерно большими, что мешает комфортному чтению. Вот способ, как это исправить.
1. Добавляем блок T123 и прописываем в него код ниже.
2. В строку "var blockIds = ['#rec963209421']; // массив идентификаторов блоков"
Прописываем rec id своих блоков, которые будем автоскейлить.
Если их несколько то в формате: ['#rec963209421', '#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.
например до 1280.
Далее мы сталкиваемся с проблемой, что наши потоки, открывающиеся в попапе, тоже автоскейлятся в ПК версиях, а нам этого не надо, т.к. буквы становятся на пол экрана. Поэтому мы должны сделать "анзум" попап-потоков на ПК версиях.
4. Так же в блок T123 добавляем код ниже:
<style>
@media screen and (min-width: 1024px) {
.t-feed__post-popup.t-popup.t-popup_show {zoom: 0.5}}
</style>
5. Вроде всё! :)